shadreg v0.0.75

shadreg

A CLI tool for generating a ShadCN component registry JSON for your UI library.

Commands

init

The init command initializes the necessary dependencies for your project and generates a configuration file.

npx shadreg init

You will be prompted with a series of questions to configure your project.

Example interaction:

✔ A shadreg.config.ts file already exists. Overwrite it? Yes
✔ Enter the output directory: ./shadreg
✔ Enter the base url of your components: ./src/components
✔ Do you want to include registry example? Yes

Config File Template

// shadreg.config.ts

import { shadregConfig } from "shadreg"

export default shadregConfig({
  baseUrl: "./src/components", // Path to your component files
  outputDir: "./shadreg", // Output directory for the registry files
  registries: [
    {
      name: "cool-text", // Component name
      type: "registry:ui", // Type of registry (e.g., UI component)
      registryDependencies: ["button"], // Components your component depends on
      dependencies: [], // Regular dependencies
      devDependencies: [], // Dev dependencies
      tailwind: {
        config: {}, // Tailwind config if necessary
      },
      cssVars: {}, // CSS variables for your component
      files: ["cool-text.tsx"], // Files associated with the component
    },
  ],
})

// your "cool-text" component should located at ./src/components/cool-text.tsx

Properties

build

The build command generates the registry JSON files in the specified output directory.

npx shadcn build

This will generate the registry JSON files and a _generated.json in the outputDir you set.

_generated.json Structure

A allRegistries object is exported from index.mjs and index.d.ts files, which can be imported into your Next.js project, used in API endpoints, etc.

So that you can make your component public with API endpoint and Shadcn CLI.

Example for Next.js Integration

1. Update path alias in tsconfig.json or jsconfig.json :

"paths": {
  "@/*": ["./src/*"],
  "@/shadreg": ["./shadreg/index.mjs"] // <-- add this line
}

2. Create an API route in src/app/api/registry/[name]/route.ts :

// src/app/api/registry/[name]/route.ts

import { NextResponse } from "next/server"
import { allRegistries } from "@/shadreg"

export async function GET(
  request: Request,
  { params }: { params: { name: string } },
) {
  const { name } = params
  const registry = allRegistries.find((entry) => entry.name === name)

  if (!registry) {
    return NextResponse.json(
      { error: `Registry with name "${name}" not found` },
      { status: 404 },
    )
  }

  return NextResponse.json(registry.entry)
}

To fetch the registry:

GET http://localhost:3000/api/registry/cool-text

To add the registry with shadcn:

npx shadcn@latest add http://localhost:3000/api/registry/cool-text

publish

The publish command uploads the registry JSON to Vercel Blob Store, making it publicly accessible.

npx shadcn publish

You must provide a Vercel Blob token in your .env file.

BLOB_READ_WRITE_TOKEN=your-vercel-blob-token

Once published, the Vercel Blob URL will be added to the _generated.json file.

License

Licensed under the MIT license.