registry-item.json

The registry-item.json schema is used to define registry items. It is the shape served at /r/styles/{style}/{name}.json and by /init.

{  "$schema": "https://shadcn-templ.com/schema/registry-item.json",  "name": "accordion",  "registryDependencies": ["icon"],  "files": [    {      "path": "components/accordion/accordion.templ",      "content": "...",      "type": "registry:ui"    },    {      "path": "components/accordion/accordion.js",      "content": "...",      "type": "registry:ui"    }  ],  "type": "registry:ui",  "meta": {    "links": {      "docs": "https://shadcn-templ.com/docs/components/accordion"    }  }}

Definitions

$schema

The $schema property identifies the shadcn-templ registry-item.json format.

{  "$schema": "https://shadcn-templ.com/schema/registry-item.json"}

name

The name of the item. This is used to identify the item in the registry. It should be unique for your registry. In the shadcn-templ registry it is the kebab-case component name and doubles as the docs slug.

{  "name": "alert-dialog"}

title

A human-readable title for your registry item. Keep it short and descriptive.

{  "title": "Alert Dialog"}

description

A description of your registry item. This can be longer and more detailed than the title.

{  "description": "Modal dialog for critical confirmations."}

type

The type property is used to specify the type of your registry item. This is used to determine how the item is resolved and installed.

{  "type": "registry:ui"}

The following types are used:

dependencies

The dependencies property is used to specify the dependencies of your registry item. This is for Go modules.

Use @version to specify the version, e.g. @latest.

{  "dependencies": ["github.com/axadrn/shadcn-templ/v2@latest"]}

registryDependencies

Used for registry dependencies. Each entry is an item address, resolved recursively by the CLI.

• For shadcn-templ registry items such as button, icon, utils, etc use the name eg. ["button", "icon"].
• For custom registry items use the URL of the registry item eg. ["https://example.com/r/styles/base-nova/button.json"].

{  "registryDependencies": ["button", "icon"]}

files

The files property is used to specify the files of your registry item. Each file has a path, type and, in served items, a content property.

{  "files": [    {      "path": "components/accordion/accordion.templ",      "content": "...",      "type": "registry:ui"    },    {      "path": "components/accordion/accordion.js",      "content": "...",      "type": "registry:ui"    }  ]}

path

The path property is used to specify the path to the file in the registry. The CLI derives the install path from path and the consumer’s components.json aliases — there is no target property.

content

The content property carries the file source in served items. .templ sources are compiled for the requested style with flat Tailwind classes; .js files ship verbatim. The source registry.json catalog omits content.

type

The type property is used to specify the type of the file. See the type section for more information.

cssVars

Use to define CSS variables for your registry item. registry:theme and registry:base items carry the theme here.

{  "cssVars": {    "theme": {      "--font-heading": "var(--font-sans)"    },    "light": {      "background": "oklch(1 0 0)",      "radius": "0.625rem"    },    "dark": {      "background": "oklch(0.145 0 0)"    }  }}

css

Use css to add rules to the consumer’s CSS file. The base item uses it for the vendored stylesheet imports and the @layer base rules.

{  "css": {    "@import \"./tw-animate.css\"": {},    "@import \"./shadcn-tailwind.css\"": {},    "@layer base": {      "*": {        "@apply border-border outline-ring/50": {}      },      "body": {        "@apply bg-background text-foreground": {}      }    }  }}

The @import entries reference the vendored stylesheets, which the CLI fetches from the registry’s /assets/css/ and writes next to the consumer’s Tailwind entry file.

extends

The extends property marks a registry:base item that does not extend another base. The /init item sets it to "none".

{  "extends": "none"}

config

The config property of a registry:base item carries the design system config the CLI writes into components.json: style, tailwind.baseColor, iconLibrary, rtl, menuColor and menuAccent.

{  "config": {    "style": "base-nova",    "tailwind": {      "baseColor": "neutral"    },    "iconLibrary": "lucide",    "rtl": false,    "menuColor": "default",    "menuAccent": "subtle"  }}

categories

Use categories to organize your registry item. The shadcn-templ catalog uses them to group components.

{  "categories": ["layout-navigation"]}

meta

Use meta to add additional metadata to your registry item. Served registry:ui items carry the docs link here.

{  "meta": {    "links": {      "docs": "https://shadcn-templ.com/docs/components/accordion"    }  }}