DOCSEARCHbyAlgolia
Submit Docs

shadcn UI Registry Template

repository·main·Indexed 43 days ago

https://github.com/shadcn-ui/registry-template

A Next.js-based template for creating custom component registries compatible with the shadcn CLI. It enables developers to distribute their own components, hooks, and pages as static files or via dynamic route handlers, including support for the Open in v0 API and Tailwind v4.

Tokens
449
Snippets
2
Records
4
Agent score
6%

What's inside shadcn UI Registry Template

  3. How the registry template works

    main

    The registry template follows these core principles to ensure compatibility with the shadcn CLI:

    • Definition: Components and their associated files are defined in a registry.json file.
    • Build Process: Use the shadcn build command to generate the registry.
    • Serving Files: Registry items are served as static files located under public/r/[name].json.
    • Route Handlers: The template includes a route handler to serve registry items dynamically.
    • Compatibility: Every registry item created with this template is compatible with the shadcn CLI.
    • v0 Integration: Includes support for the Open in v0 API.
    # Build the registry
shadcn build

  4. Merge Tailwind CSS classes with cn()

    main

    The cn utility function is used to conditionally merge Tailwind CSS classes. It combines clsx for handling conditional logic (e.g., true && 'class-name') and twMerge to resolve Tailwind CSS class conflicts (e.g., ensuring p-4 overrides p-2 when both are present).

    import { cn } from "@/lib/utils"

// Example usage:
const className = cn(
  "base-class",
  isTrue && "conditional-class",
  "p-4 p-2" // twMerge will resolve this to just 'p-4'
)