Installation

This registry follows the shadcn/ui registry schema and is meant to be consumed with the shadcn CLI (shadcn@latest). Use a direct URL to a published registry-item JSON, or register a namespace in components.json and add by name.

Prerequisites

Your project should already use shadcn/ui (Tailwind, components.json, @/components/ui aliases). If you are starting fresh:

pnpm dlx shadcn@latest init

npx shadcn@latest init

yarn dlx shadcn@latest init

bun x shadcn@latest init

Add a Component from This Registry

Point add at the item JSON served under /r (built from src/registry.json).

Example — Date picker (date-picker item → date-picker.json; range picker is date-range-picker.json):

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/date-picker.json

npx shadcn@latest add https://ui.isaacfei.com/r/date-picker.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/date-picker.json

bun x shadcn@latest add https://ui.isaacfei.com/r/date-picker.json

The CLI resolves dependencies and registryDependencies (e.g. button, popover from the default registry) and writes files under the paths declared in the item.

Namespace (Optional)

To install with a short name instead of a long URL, add a registries entry in your components.json:

{
  "registries": {
    "@f-ui": "https://ui.isaacfei.com/r/{name}.json"
  }
}

Then:

pnpm dlx shadcn@latest add @f-ui/date-picker

npx shadcn@latest add @f-ui/date-picker

yarn dlx shadcn@latest add @f-ui/date-picker

bun x shadcn@latest add @f-ui/date-picker

Here {name} is the registry item name (e.g. date-picker → date-picker.json). The date family also ships separate namespace items such as @f-ui/calendar, @f-ui/date-picker, and @f-ui/date-range-picker.

Plus Registry

Plus components are fully documented on this site. They install from a separate manifest (registry.plus.json) that requires a registry token — not from the open registry.json index.

Examples: Data Table, Code Block, Mermaid Renderer, Markdown Renderer. Use the @f-ui-plus namespace and a Bearer token the CLI sends on each request.

Use the environment variable FUI_PLUS_REGISTRY_TOKEN (see components.json below).

1. Configure components.json

Add @f-ui-plus next to the open @f-ui entry (keep both if you use open and plus items):

{
  "registries": {
    "@f-ui": "https://ui.isaacfei.com/r/{name}.json",
    "@f-ui-plus": {
      "url": "https://ui.isaacfei.com/api/plus/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${FUI_PLUS_REGISTRY_TOKEN}"
      }
    }
  }
}

2. Create a token

Generate a token from your f-ui tokens page, then expose it as FUI_PLUS_REGISTRY_TOKEN (for example in .env.local or your shell) so the shadcn CLI can substitute it into the Authorization header.

3. Install a Plus Item

Example — Data Table:

FUI_PLUS_REGISTRY_TOKEN=xxx pnpm dlx shadcn@latest add @f-ui-plus/data-table

FUI_PLUS_REGISTRY_TOKEN=xxx npx shadcn@latest add @f-ui-plus/data-table

FUI_PLUS_REGISTRY_TOKEN=xxx yarn dlx shadcn@latest add @f-ui-plus/data-table

FUI_PLUS_REGISTRY_TOKEN=xxx bun x shadcn@latest add @f-ui-plus/data-table

Use the same pattern for @f-ui-plus/code-block, @f-ui-plus/mermaid-renderer, @f-ui-plus/markdown-renderer, and any other plus item name from your registry build.

4. Verify the token

curl -H "Authorization: Bearer $FUI_PLUS_REGISTRY_TOKEN" \
  https://ui.isaacfei.com/api/plus/r/data-table.json

5. CI/CD (GitHub Actions)

Store the token as a repository secret (for example FUI_PLUS_REGISTRY_TOKEN) and pass it through under the same name the CLI expects:

- name: Install Plus components
  env:
    FUI_PLUS_REGISTRY_TOKEN: ${{ secrets.FUI_PLUS_REGISTRY_TOKEN }}
  run: npx shadcn@latest add @f-ui-plus/data-table

Registry Index

The full published manifest is available at /r/registry.json. It lists all items for tooling or manual inspection.

Next

• Internationalization — FuiI18nProvider, resolver hooks, and wiring f-ui strings next to your app i18n.
• Calendar, Date Picker, and Date Range Picker — usage, props, and examples for the public date family registry items.
• Email Input, URL Input, and Phone Input — icon-leading text fields.
• Empty Value Placeholder — empty-value-placeholder registry item.
• Currency Format and Currency Input — money helpers and field component.
• Language Selector — language-selector registry item.
• Theme Mode Selector and Theme Mode Toggle — appearance controls.
• Code Block — @f-ui-plus/code-block (Shiki, line numbers, copy).
• Mermaid Renderer — @f-ui-plus/mermaid-renderer.
• Markdown Renderer — @f-ui-plus/markdown-renderer.
• Data Table — @f-ui-plus/data-table.