--- title: "Import Workflow" description: "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](/docs/installation), 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](https://github.com/axadrn/shadcn-templ/discussions). 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](/docs/installation#configure-templ-tailwind-css-and-task). ## Setup ### 1. Add shadcn-templ ```shell 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](/docs/installation#run-the-cli): it creates `assets/css/globals.css` and merges your theme variables and base layer into it. Pick a design on [shadcn-templ.com/create](https://shadcn-templ.com/create) and pass its preset code, or use one of the named presets: ```shell go install github.com/axadrn/shadcn-templ/v2/cmd/shadcn-templ@latest shadcn-templ init ``` Then add one line to `assets/css/globals.css`, right after the tailwindcss import: ```css @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](/docs/theming). ### 3. Create Taskfile ```yaml 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: ```shell task dev ``` ### 4. Activate a style Components carry `cn-*` classes; the style class on `` 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-.css` in the `tailwind` task above (the snippets use `style-nova`): ```templ ``` ### 5. Import and use a component ```go import "github.com/axadrn/shadcn-templ/v2/components/button" ``` ```templ @button.Button() { Click me } ``` ## JavaScript and Assets The script bundle and asset serving are identical in both workflows: see [Installation → JavaScript](/docs/installation#javascript) and [Installation → Serve Assets](/docs/installation#serve-assets).