Zaidan

Command Palette

Search for a command to run...

GitHub59

Zaidan Agent

Zaidan includes an AI agent system that automates syncing Shadcn based React components into Zaidan. It handles the full pipeline — code transformation, documentation generation, code review, and registry management — so you can bring your favorite React components into Zaidan.

How to use it ?

Zaidan Agent runs inside the Zaidan repository itself. You should think of Zaidan as a playground — a place to transform, test, and iterate on components using the built-in UI, the component previews, and the customizer before publishing them to the registry.

To get started, clone or fork the repository:

Terminal window
git clone https://github.com/carere/zaidan.git
cd zaidan
bun install

Then you can run commands in two ways:

Inside a Claude Code session — open the project in Claude Code and run commands interactively:

Terminal window
claude
# then type /sync, /registry-audit, etc.

One-shot with claude -p — run a command directly from your terminal:

Terminal window
claude -p "/sync --filter=\"button\" --dry-run"

Why clone Zaidan ?

The agent generates component code, examples, and documentation that integrate with Zaidan's registry structure. By working inside the repo, you get:

  • Live preview — See your transformed components rendered in the Zaidan UI
  • Customizer access — Test components against different themes, colors, fonts, and radius values using the built-in customizer
  • Iterative workflow — Review the generated code, tweak it, re-run the agent, and see updates in real time
  • Easy Contribution - Zaidan create commits and PR for you, so when you're ready to publish, just push the PR and we''l review it

Commands

/sync

The main command for bringing components into Zaidan. It operates in two modes:

  • Shadcn mode (default) — Sync components from shadcn registry.
  • External mode — Sync components from external registries (Origin-UI, Magic-UI, ...).

Flags

FlagDefaultDescription
--primitivekobalteTarget primitive system (kobalte, base-ui coming soon)
--registryExternal registry.json URL. Omit for shadcn mode
--docsExternal only — Raw mdx URL template
--examplesExternal only — Raw tsx URL template
--playgroundExternal only — URL template of live preview
--filterRegex to filter which components to sync
--dry-runfalseDiscovery only — stops before transformation
--transform-instructionsCustom instructions passed to transformer agents

URL Templates

URL templates for external mode use {component} as a placeholder, replaced with each component's kebab-case name at runtime. You can append an optional |prompt suffix to provide extraction guidance:

Terminal window
--docs="https://docs.example.com/{component}.mdx|Look in the API section"
--examples="https://raw.github.com/.../examples/{component}.tsx|Focus on the usage example"
# Glob pattern also works
# --examples="https://raw.github.com/.../examples/{component}/*.tsx|Extract all examples, not just the first one"

The part before | is the URL, the part after are instructions to find the relevant content (if not provided, all the page is parsed by the agent).

Usage Examples

Terminal window
# Sync all missing shadcn components with kobalte primitive
/sync
# Preview what would be synced (no transformation) and filter to only button and card components
/sync --filter="^(button|card)" --dry-run
# Sync from an external registry
/sync --registry="https://raw.github.com/some-dir/registry.json" \
--docs="https://raw.github.com/.../docs/{component}.mdx" \
--examples="https://raw.github.com/.../examples/{component}.tsx" \
--playground="https://bazza.dev/preview/{component}"
# Pass custom guidance to transformers
/sync --filter="data-table" \
--transform-instructions="Use Tanstack Table for integrating tables"

/registry-audit

Read-only health check for the component registry. Scans registry.json against the filesystem and reports missing entries, orphaned items, schema violations, and broken dependency chains. If issues are found, it suggests running /registry-update to fix them automatically.

FlagDefaultDescription
--primitivekobalteRegistry namespace to audit (kobalte, base-ui comning soon)

/registry-update

Does everything /registry-audit does, plus auto-fixes the issues it finds: adds missing entries, removes orphaned items, repairs broken dependency chains, rebuilds the registry, formats with Biome, and commits the changes.

FlagDefaultDescription
--primitivekobalteRegistry namespace to update (kobalte, base-ui coming soon)

Troubleshooting

BLOCKED status

A component's registry dependencies are missing. The transformer validates all dependencies before starting and aborts if any are unavailable. Sync the missing dependency first, then retry.

FAIL in code review

Critical issues were found — typically React remnants or convention violations. The code reviewer attempts up to 3 automatic fixes per file. If the component still fails, it's excluded from registry updates and you'll need to address the issues manually.

Use --dry-run to diagnose

Run /sync --dry-run to see what would be synced without performing any transformation. This is useful for verifying filter patterns, checking which components are missing, and confirming dependency availability before committing to a full sync.