foldcn

shadcn components for Foldkit. Public beta — the registry and docs are live, but APIs and parity are still evolving.

A registry of copy-paste components built on @foldkit/ui, Foldkit, and Tailwind CSS. It's a shadcn-compatible registry so you can use an existing shadcn CLI to install it, should be pretty straightforward.

Browse everything at foldcn.elianiva.com

Get started

You need a Foldkit project with Tailwind CSS v4.

Your Tailwind entry file (e.g. src/index.css) must already contain @import "tailwindcss"; before you install the base style. Without it the CLI crashes with a cryptic proxyOf error.

Four steps from an existing Foldkit project. If you are starting from scratch, run shadcn init first, then continue below.

1. Initialize shadcn (new projects only)

npx shadcn@latest init

Configure aliases (components, utils, ui, lib, hooks) when prompted. Skip this if components.json already exists.

2. Register the namespace

npx shadcn@latest registry add @foldcn=https://foldcn.elianiva.com/r/{name}.json

Or add it manually to components.json:

{
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@foldcn": "https://foldcn.elianiva.com/r/{name}.json"
  }
}

3. Install the base style

npx shadcn@latest add @foldcn/foldcn

This writes the theme variables (all shadcn tokens — background, foreground, primary, etc. as CSS variables in :root / .dark with Tailwind v4 @theme inline mappings) into your CSS and installs the core dependencies: foldkit, effect, @foldkit/ui, cn, lucide, tw-animate-css.

4. Add components as you need them

npx shadcn@latest add @foldcn/button @foldcn/input @foldcn/dialog
# pnpm dlx / bunx work too — pick your poison

Differences vs shadcn/ui

A few components are intentionally diverged. Usually because the underlying @foldkit/ui primitive doesn't have that behavior yet. You can see them all on the website — diverged items show an amber parity badge and a "Differences vs shadcn/ui" callout on their doc page.

Not yet in foldcn

These shadcn/ui base components are not ported yet. Track progress in GitHub Issues:

• chart

Sonner is covered by toast.

LLM-friendly

Every page is published as Markdown alongside HTML, they're all autogenerated from the HTML. You can just point your agents to these files:

• /llms.txt - index of the whole site
• /docs/<name>.md - Markdown twin of any component or block page
• Content negotiation - Accept: text/markdown or append .md, and the Worker serves Markdown with Content-Type: text/markdown

curl -H "Accept: text/markdown" https://foldcn.elianiva.com/docs/button
curl https://foldcn.elianiva.com/docs/button.md
curl https://foldcn.elianiva.com/llms.txt

Development

git clone git@github.com:elianiva/foldcn.git
cd foldcn
pnpm install
pnpm dev            # start the showcase site
pnpm typecheck      # typecheck all packages
pnpm test           # run tests
pnpm validate       # validate the registry

See CONTRIBUTING.md for guidelines.

License

MIT