Skip to content

ilyichv/shadcn-registry-template

Repository files navigation

shadcn-registry-template

shadcn-ui v2.0 introduced the possibility of fetching components from custom registries, that's why this template was born.

image

Components

As did by shadcn-ui, components are organized by styles under the registry folder. Files are structured as follows:

registry
├── default
│   ├── hooks
│   ├── lib
│   ├── themes
│   └── ui
└── <your-style>
    ├── <custom-registry-name>
    └── ui

Adding new components, hooks, lib, themes, etc.

  1. As did for the accordion, add your component under the registry folder.
  2. Register your component in the registry-<scope>.ts (eg. registry-ui.ts for components, registry-themes.ts for themes, etc.)
  3. Run pnpm build:registry to generate the registry.ts file.

Installing custom components

You can install your custom components by running

npx shadcn@latest add {app-url}/r/styles/{style-name}/{component-name}.json

Running the app locally

This app simple homepage was thought for simplify the process of building the registry url.

In order to see it in action locally, run pnpm dev and navigate to http://localhost:3000.

Deploy it on Vercel

Deploy with Vercel