shadcn components for Foldkit.

Beta

A registry of 67 copy-paste components built with @foldkit/ui, Foldkit TEA architecture, and Tailwind CSS.

Foldkit-only — not a React drop-in. If you use React, stay on shadcn/ui. New to Foldkit? foldkit.dev first.

Get started

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

Prerequisite

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

Initialize shadcn (new projects only)
If you do not have a components.json, scaffold it per ui.shadcn.com/docs/installation:
Terminal1 lines
```
npx shadcn@latest init
```
Configure aliases (components, utils, ui, lib, hooks) when prompted. Skip this if components.json already exists.
Register the @foldcn namespace
So the CLI knows where to fetch foldcn items from:
Terminal1 lines
```
npx shadcn@latest registry add @foldcn=https://foldcn.elianiva.com/r/{name}.json
```
Or add "@foldcn": "https://foldcn.elianiva.com/r/{name}.json" under registries in components.json manually.
Install the base style
Writes the theme variables (:root / .dark + @theme inline) and installs core deps (foldkit, effect, @foldkit/ui, cn, lucide, tw-animate-css):
Terminal1 lines
```
npx shadcn@latest add @foldcn/foldcn
```
Add components as you need them
Terminal1 lines
```
npx shadcn@latest add @foldcn/button @foldcn/dialog
```
pnpm dlx / bunx work too — pick your runner. Each component is copy-paste source you own.

For AI agents

Paste this prompt to your agent so it follows the exact install contract. It covers prerequisites, namespace registration, and where to read docs as Markdown.

Agent prompt — copy and paste15 lines

Set up foldcn in this project.

Foldcn is a shadcn-compatible registry for Foldkit (not React). Follow these steps exactly:

1. Prerequisites: This must be a Foldkit project with Tailwind CSS v4. Ensure the Tailwind entry file (e.g. src/index.css) contains @import "tailwindcss"; — without it the shadcn CLI crashes with a cryptic proxyOf error. See https://foldkit.dev for Foldkit setup.

2. Initialize shadcn if needed: If no components.json exists, run npx shadcn@latest init per https://ui.shadcn.com/docs/installation and configure aliases (components/ui/lib/hooks). Keep your existing components.json otherwise.

3. Register the @foldcn namespace: Run npx shadcn@latest registry add @foldcn=https://foldcn.elianiva.com/r/{name}.json — or add "registries": { "@foldcn": "https://foldcn.elianiva.com/r/{name}.json" } to components.json manually.

4. Install the base style: npx shadcn@latest add @foldcn/foldcn — this writes the theme variables (:root/.dark + @theme inline) and installs foldkit, effect, @foldkit/ui, cn, lucide, tw-animate-css.

5. Add components as needed: npx shadcn@latest add @foldcn/button @foldcn/dialog (replace with the components you need). pnpm dlx / bunx work too.

Docs: https://foldcn.elianiva.com — every page has a Markdown twin for agents: /llms.txt index, /docs/<name>.md per component, or request with Accept: text/markdown.

Agents can also read Markdown directly: /llms.txt for the index, /docs/<name>.md per component, or send Accept: text/markdown. Try curl -H "Accept: text/markdown" https://foldcn.elianiva.com/docs/button.

Browse all 67 components — or read about shadcn namespaces.