Registry Setup

Configure your components.json to use UIFoundry components with the shadcn CLI

Registry Setup

To use UIFoundry components with the shadcn CLI, you need to configure your components.json file to include the UIFoundry registry.

Configuration

Add the UIFoundry registry to your components.json file's registries section:

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "stone",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/styles/utils",
    "ui": "~/ui",
    "lib": "~/payload",
    "hooks": "~/hooks",
    "payload": "~/payload"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@uifoundry": "https://uifoundry.dev/r/{name}.json"
  }
}

Key Configuration

The important part is adding the registries section with the UIFoundry registry:

"registries": {
  "@uifoundry": "http://uifoundry.dev/r/{name}.json"
}

Usage

Once configured, you can install UIFoundry components using the shadcn CLI:

npx shadcn@latest add @uifoundry/hero-1
npx shadcn@latest add @uifoundry/header-global
npx shadcn@latest add @uifoundry/color-field

Next Steps

After setting up your registry, you can start installing and using UIFoundry components in your project. Check out the individual component documentation for usage examples and configuration options.