Creating a Custom Registry with shadxn

Building a custom registry enables you to curate a personalized set of components that can be easily integrated into your projects. This guide covers the workflow for creating and using a custom registry with shadxn.

Getting Started

To begin, we recommend starting with a fresh Next.js project:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Steps to Create Your Custom Registry

Step 1: Initialize the Registry

Initialize your registry with shadxn to set up the necessary files and structure:

shadxn registry init

Optionally, you can choose a boilerplate for your registry with one of the available options: shadcn, aceternity, or blank (default).

shadxn registry init -r shadcn

Running this command will copy the registry files and folders to the src/registry directory.

File Structure of the Registry

src/
└── registry/
    ├── new-york/
    │   ├── ui/
    │   │   └── button.tsx
    │   └── example/
    │       └── button-demo.tsx
    ├── default/
    │   ├── ui/
    │   │   └── button.tsx
    │   └── example/
    │       └── button-demo.tsx
    ├── colors.mjs
    ├── themes.mjs
    ├── registry.mjs
    ├── styles.mjs
    └── .eslintrc.json

Step 2: Adding Components

Add your components to the appropriate type folder (ui, example, or page) within both the new-york and default style folders. Ensure your components are added to both styles to maintain consistency.

Step 3: Build the Registry

Once you're satisfied with your components, build your registry to prepare it for use:

shadxn registry build

This command generates the registry files under the public/registry folder.

Step 4: Add Your Registry to Your Project

Initialize your project with shadxn init to generate the components.json file, then add your new registry:

shadxn registry add my-registry

You'll be prompted to provide the base URL for your registry. For local testing, this will be http://localhost:3000.

Step 5: Test Your Registry

Put your new registry to the test by adding a component from it:

shadxn add my-component -r my-registry

Congratulations! 🥳 You have successfully created your own custom registry with shadxn. You can now share this registry with others, enhancing the reusability and scalability of your component management workflow.