components.json

The components.json file holds configuration for your project.

We use it to understand how your project is set up and how to generate components customized for your project.

You can create a components.json file in your project by running the following command:

shadcn-templ init

See the CLI section for more information.

$schema

The $schema identifies the shadcn-templ components.json format. shadcn-templ init writes it for you.

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

style

The style for your components. init writes it from your preset (base-nova, base-vega, …), and shadcn-templ add fetches every component pre-compiled for this style.

{  "style": "base-nova"}

To change the style of an existing project, apply a new preset with shadcn-templ apply.

tailwind

Configuration to help the CLI understand how Tailwind CSS is set up in your project.

See the installation section for how to set up Tailwind CSS.

tailwind.css

Path to the CSS file that imports Tailwind CSS into your project, relative to your project root. init detects it, or creates assets/css/globals.css; override with --css.

{  "tailwind": {    "css": "assets/css/globals.css"  }}

tailwind.baseColor

This is used to generate the default theme tokens for your components.

{  "tailwind": {    "baseColor": "neutral" | "stone" | "zinc" | "mauve" | "olive" | "mist" | "taupe"  }}

tailwind.cssVariables

We use CSS variables for theming. shadcn-templ components always theme through CSS variables, so init writes true.

{  "tailwind": {    "cssVariables": true  }}

For more information, see the theming docs.

iconLibrary

The icon library of your preset. shadcn-templ currently ships lucide.

{  "iconLibrary": "lucide"}

rtl

Whether your components install with RTL (right-to-left) support. Written from your preset; shadcn-templ apply requests RTL-compiled components from the registry when it is true.

{  "rtl": false}

menuColor

The menu appearance of your preset: default, default-translucent, inverted or inverted-translucent. Written from your preset and used by shadcn-templ preset resolve to reconstruct your preset code.

{  "menuColor": "default"}

menuAccent

The menu accent of your preset: subtle or bold. Written from your preset and used by shadcn-templ preset resolve to reconstruct your preset code.

{  "menuAccent": "subtle"}

aliases

The CLI uses these values to place generated components in the correct location and rewrite imports.

The aliases are Go import paths. init derives them from the module path in your go.mod, and both must live under that module path.

aliases.utils

Import path for the shared utils package.

{  "aliases": {    "utils": "your-app/utils"  }}

aliases.components

Import path for your components.

{  "aliases": {    "components": "your-app/components"  }}