shadcn-templ 2.0 beta. Switch to templUI v1
1.7k
New

Import Workflow

Previous

Use shadcn-templ as a plain Go module dependency.

⚠️ Experimental: This workflow may not survive to 2.0 stable. The supported path is the CLI, which copies component source into your app so you own and edit it, exactly like shadcn. The import workflow instead consumes shadcn-templ like any Go library: no copied files, updates via go get, customization by wrapping components rather than editing them. If you rely on it, say so. Real-world usage decides whether it ships in stable.

Prerequisites

The same tools as the CLI workflow: see Installation → Configure templ, Tailwind CSS and Task.

Setup

1. Add shadcn-templ

go get github.com/axadrn/shadcn-templ/v2@latest

You can also just import a component package and run go mod tidy.

2. Initialize Styles

Style setup is the same shadcn-templ init as in the CLI workflow: it creates assets/css/globals.css and merges your theme variables and base layer into it. Pick a design on shadcn-templ.com/create and pass its preset code, or use one of the named presets:

go install github.com/axadrn/shadcn-templ/v2/cmd/shadcn-templ@latestshadcn-templ init

Then add one line to assets/css/globals.css, right after the tailwindcss import:

@import "tailwindcss";@import "./sources.generated.css";

sources.generated.css is written by the tailwind task in the next step: it pulls the component styles (style-nova.css), the shared shadcn/tailwind.css layer and the tw-animate-css utilities straight from the shadcn-templ module and registers the .templ sources for scanning.

💡 Tip: For custom themes and color palettes, see the theming docs.

3. Create Taskfile

version: "3" tasks:  templ:    desc: Run templ with integrated server and hot reload    cmds:      - templ generate --watch --proxy="http://localhost:8090" --cmd="go run ./main.go" --open-browser=false   tailwind:    desc: Watch Tailwind CSS changes    cmds:      - |        SHADCN_TEMPL_PATH="$(go list -mod=mod -m -f {{`'{{.Dir}}'`}} github.com/axadrn/shadcn-templ/v2)" && \        printf '%s\n' \          "@import \"$SHADCN_TEMPL_PATH/assets/css/tw-animate.css\";" \          "@import \"$SHADCN_TEMPL_PATH/assets/css/shadcn-tailwind.css\";" \          "@import \"$SHADCN_TEMPL_PATH/assets/css/styles/style-nova.css\" layer(base);" \          '@source "./**/*.templ";' \          "@source \"$SHADCN_TEMPL_PATH/components/**/*.templ\";" \          > ./assets/css/sources.generated.css && \        tailwindcss -i ./assets/css/globals.css -o ./assets/css/output.css --watch   dev:    desc: Start development server with hot reload    cmds:      - task --parallel tailwind templ

Run everything with:

task dev

4. Activate a style

Components carry cn-* classes; the style class on <body> picks which of the eight styles renders them (style-nova, style-vega, style-maia, style-lyra, style-mira, style-luma, style-sera, style-rhea). Use the style from your components.json (init writes it, nova by default) and import the matching style-<name>.css in the tailwind task above (the snippets use style-nova):

<body class="style-nova">

5. Import and use a component

import "github.com/axadrn/shadcn-templ/v2/components/button"
@button.Button() {  Click me}

JavaScript and Assets

The script bundle and asset serving are identical in both workflows: see Installation → JavaScript and Installation → Serve Assets.

registry-item.json