Recommended for new projects: Use shadcn-templ/create to build your preset visually and generate the right setup command.
Choose the setup that matches your starting point.
Use shadcn-templ/create
Build Your Preset
Open shadcn-templ/create and build your preset visually. Choose your style, colors, fonts, icons, and more.
Create Project
Click Get Code, choose your project tab, and copy the generated command. Install the CLI first if you do not have it yet:
The generated command will look similar to this:
The exact command will include the preset code that encodes your selected options such as your style, base color and fonts.
Run the App
The scaffolded project ships the Taskfile.yml dev setup. Run everything with:
Add Components
Add the Card component to your project:
The command above will add the Card component to your project. You can then import it like this:
After adding components, run templ generate and go mod tidy.
Use the CLI
Create Project
Run the init command to scaffold a new templ project. Configure your project with flags: preset, base color, and more:
Pick a design on shadcn-templ/create and pass its preset code, or use one of the named presets (nova, vega, maia, lyra, mira, luma, sera, rhea):
Run the App
The scaffolded project ships the Taskfile.yml dev setup. Run everything with:
Add Components
Add the Card component to your project:
The command above will add the Card component to your project. You can then import it like this:
After adding components, run templ generate and go mod tidy.
Existing Project
Create Project
If you need a new Go module, create one with go mod init. Otherwise, skip this step.
Configure templ, Tailwind CSS and Task
If you’re adding shadcn-templ to an existing templ app, make sure templ, Tailwind CSS and Task are installed first:
The Tailwind CSS v4.1+ standalone CLI is required: download it from the GitHub Releases or use your package manager.
Import aliases need no configuration: Go resolves imports through the module path in your go.mod. See Package Imports.
Run the CLI
Run the shadcn-templ init command to set up shadcn-templ in your project:
Init writes components.json, merges your theme CSS variables and base layer into your Tailwind entry file (detected, or created at assets/css/globals.css), vendors tw-animate.css and shadcn-tailwind.css next to it, and installs the shared utils package. See the CLI docs for all flags, updating with --overwrite and applying presets.
Create Taskfile
templ and Tailwind run as watchers; a Taskfile.yml in your project root wires them into one dev command:
Run everything with:
Adjust the --proxy port (default: 8090) if your app uses a different port. templ’s dev server runs at http://localhost:7331
Add Components
You can now start adding components to your project.
The command above will add the Button component to your project. You can then import it like this:
After adding components, run templ generate and go mod tidy.
JavaScript
shadcn-templ ships all component behavior as one script bundle. The setup is a one-time step in your app, no per-component script tags.
Render the script tag once in your layout <head>:
Mount the route the script tag points at:
The bundle is the concatenation of every components/*/*.js file. In production (GO_ENV=production) it is built once from the embedded files and served with immutable caching; in development it is rebuilt from the local components directory on every request, so edits to copied component scripts hot-reload.
Serve Assets
Use setupAssetsRoutes(...) to serve your app assets like Tailwind CSS output, fonts, images, and local files:
Your Go app must serve /assets/... so the browser can load assets/css/output.css, fonts, images, and local files. The /components/shadcn-templ.js route serves the script bundle that @components.Scripts() loads.
📝 Note: shadcn-templ also works as a plain Go module dependency without copying any source. That is a shadcn-templ extra outside this page, see Import Workflow.
Component Props
Every component accepts three universal props that are left out of the per-component API tables:
Standard HTML behavior (Disabled, Type, Href, …) works the way the platform defines it; the API tables only document what a component adds on top.