Install your first component
Getting started
Install free Template Empire React and Next.js components through the shadcn CLI, then adapt the copied source in your own project.
Before you start
Template Empire components are copied into your project rather than hidden inside a package. You own the resulting React and Tailwind source and can adapt it to the product around it.
Start with a React or Next.js project that already uses Tailwind CSS and has a components.json file. If that file is missing, initialise shadcn before adding the Template Empire namespace.
- Use pnpm, npm, yarn or bun with the shadcn CLI supported by your project.
- Keep the semantic colour tokens used by the component, or map them to equivalent tokens in your design system.
- Review the installed dependencies and source before shipping, as you would for any copied code.
Add the registry
Add the @te namespace to components.json once. The {name} placeholder lets the shadcn CLI resolve any public Template Empire registry item.
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Install a component
Choose a component from the catalogue and pass its slug to shadcn. The CLI copies the component and any declared shared files, and installs its declared runtime dependencies.
npx shadcn@latest add @te/bg-auroraUse and adapt the source
Import the named component from the path created by your shadcn aliases. Each component page contains a minimal usage example, its complete public props and the supported CSS-variable customisation points.
Preserve the reduced-motion and accessibility behaviour when adapting animation or interaction. Those fallbacks are part of the component, not optional demo code.