zedkit

Live

v0.4.0

Build the parts you need. Keep the rest of your app.

TypeScript packages for admin UI, backend helpers, SEO, and coding-agent setup — each need documented from the same catalog as the site, with linked maturity badges on every page.

Set up your coding agent

zedkit configures Cursor, Claude Code, Codex and other agents for your repo: instructions (AGENTS.md), skills, subagents and commands.

1. In your project folder, run

2. Open the project in Cursor or Claude Code and run

The agent reads your repo, runs the commands it finds and fills AGENTS.md with what it verified. If you already have a setup, it audits it first and improves it in place.

Other tools: run the setup-ai skill from your agent chat.

Init copies files into your repo (about 100 files, listed in the output) and never overwrites an existing file.

The installer has no account and sends nothing.

Undo: commit first, then delete .agents, .cursor, .claude, CLAUDE.md (and AGENTS.md if it is new).

Needs Node.js 22 or newer.

Install it or copy it

Install versioned npm packages for the full kit, or copy a growing set of UI bricks into your repo with the shadcn CLI (requires a components.json). Everything else stays npm-only.

Install as packages

Choose this when you want one import surface, semver updates, and the full token theme from the package.

Copy the source into your project

Choose this when you want the component files in your repo. You get the source under components/ui/, its npm dependencies, and the CSS variables it needs in your globals.

Published registry bricks today: badge, drawer, confirm-dialog, status-dot, checkmark, updated-ago, status-label, progress-bar, alert. After copying, the files are yours — no automatic updates.

MIT license. Built on Radix and shadcn/ui-derived code. No proprietary runtime — you own what you copy.

Nothing in the catalog is labeled stable yet. Pin versions, prefer beta needs where they exist, and read the maturity legend before you ship.

Flexibility: theme tokens (colors, radius, focus rings, control sizes, dark/light) ship with the npm package; copied bricks are plain editable files in your tree.

UI quickstart (about five minutes)

Prerequisites

Node.js 22 or newer and pnpm 9.

React 19 and Tailwind CSS v4 (Create Next App with the Tailwind option).

Run the steps below in a fresh Next.js app before expecting styled components.

1. Wire styles in src/app/globals.css

2. Install the package

npm install adds the full package. The shadcn tab copies one brick (badge); published registry items on this host: badge, drawer, confirm-dialog, status-dot, checkmark, updated-ago, status-label, progress-bar, alert (/r/<name>.json).

3. Render a button in src/app/page.tsx

Run pnpm dev — you should see a styled Save button. The live preview below uses the same components on this site.

Try the admin dashboard

Add, edit, and delete apps in the table — no backend. Switch preview to loading, empty, or error.

Project apps

Add, edit, or delete rows. Switch the preview to see loading, empty, and error states.

Actions
consoleeu
workerus

Choose an area

Four package families in the catalog — counts come from the generated index, not hand-maintained numbers.

Build an admin UI

Theme, forms, data tables, overlays, and layout primitives for admin apps.

33 documented needs in the catalog

Open UI docs
Build a backend

Result types, Nest bootstrap, structured logs, rate limits, and webhook signing.

12 documented needs in the catalog

Open backend docs
Improve SEO

Localized metadata, sitemaps, JSON-LD, and Payload SEO validation.

9 documented needs in the catalog

Open SEO docs
Set up coding agents

Skills, subagents, and provider copies validated from one manifest.

2 documented needs in the catalog

Open agent setup docs

Start from your situation

Each card links to a generated doc page (install command, example, and live preview when available).

New admin UI in an existing app

You want

Install the UI kit and turn on light/dark theme

Do this

Follow the theme page: tokens, `.dark` class, no extra CSS framework

Read the docs
Repo needs consistent agent instructions

You want

Wire skills, subagents, and provider copies with validation

Do this

Use the AI kit setup page, then run the validate command from the same package

Read the docs
Create/edit form with validation

You want

Labels, field errors, and pending submit without bespoke wiring

Do this

Start from the Form need page (react-hook-form + zod via the kit)

Read the docs
List page with sort and pagination

You want

Table with loading, empty, and error states built in

Do this

Open the DataTable page and copy the column helper pattern

Read the docs
Detail or short task beside a list

You want

Slide-in panel without losing list context

Do this

Use the Drawer page (vaul-based, focus-trapped)

Read the docs
Primary actions on a screen

You want

Variants and sizes that match the rest of the kit

Do this

See Button on the live preview below and in its doc page

Read the docs

What you can verify

33 UI catalog entries

31 ship a live preview on their doc page (manifest-driven demos).

7 packages, 56 needs

Counts come from docs/catalog/catalog.json; the docs check fails when pages drift.

Light and dark theme

Class-based `.dark` tokens; toggle in the header matches the admin kit pattern.

Theme setup page
Accessibility checks

@zedtech/zedkit-ui runs vitest-axe on rendered components in packages/ui/tests/unit.

axe test suite

Components

Curated UI previews (6 of 33 components). Open the catalog to filter every need across UI, backend, SEO, and agents.

Docs link
beta
12 events
stable
deprecated

@zedtech/zedkit-ui/styles.css (+ one @source line, see README)

Browse full catalog