2
Playground

Registry

PreviousNext

How Fable UI registry items are structured.

Fable UI is a copy-and-own registry of AI-intent-aware product surfaces. A registry item is not just a React component; it carries the model contract around that component.

Item Anatomy

Each installable item can include:

  • React UI source owned by the installing project.
  • A Zod schema for the tool payload.
  • An AI SDK-compatible tool definition using tool({ description, inputSchema, execute }).
  • Model-facing manifest guidance.
  • Eval prompts for tool selection in this repository.
  • Examples or integration glue when useful.

The root registry.json is the public GitHub source-registry entrypoint. Install commands resolve items from shobky/fable-ui/<item>.

Current registry items:

  • core
  • metric-card
  • suggested-actions
  • confirmation-card
  • form-card
  • data-browser
  • rest-driver
  • firebase-driver
  • quickstart

Dependencies

Bare registryDependencies such as card or button refer to official shadcn items. Fable-to-Fable dependencies use full GitHub addresses:

{
  "registryDependencies": ["shobky/fable-ui/core"]
}

This prevents the CLI from treating a Fable item like core as a built-in shadcn item.

Files and Targets

Each file entry has two paths:

  • path is the source file in this repository.
  • target is where shadcn writes the file in the host app.

Use host-aware aliases for reusable source files: @components/... for UI, @lib/... for shared logic, and @hooks/... for hooks when they live outside a component folder. Keep Next route and page files explicit under app/....

Registry items should install the minimum runtime set needed for that item to work. Manifests are installed because they are part of the model-facing product contract. Eval prompts are kept in this repository unless an item intentionally documents them as runtime install files.

Boundary

Registry files do not import from app, docs routes, playground helpers, or the local /chat route. The app can import registry source as evidence, but the product boundary is the public registry.

The host app still owns auth, data access, server-side validation, side effects, and persistence.

data-browser installs the generic browsing surface and core data-source types. It does not install REST or Firebase code. Install rest-driver or firebase-driver separately when the host app needs one of those adapters.