Getting Started

Installation

1. Install it by running the following command in your terminal:

   npm

   npm install registry-cn

   pnpm

   pnpm add registry-cn

   Yarn

   yarn add registry-cn

2. Configure the package by editing the registry.config.ts file.

   registry.config.ts

   import { defineConfig } from 'registry-cn'
   
   export default defineConfig({
     styles: [
       {
         name: 'default',
         label: 'Default',
         homepage: 'https://registry-cn.vercel.app',
         items: [
           {
             name: 'button',
             type: 'registry:ui',
             files: [
               {
                 path: 'ui/Button.tsx',
                 type: 'registry:ui'
               }
             ]
           },
           {
             name: 'utils',
             type: 'registry:lib',
             files: [
               {
                 path: 'lib/utils.ts',
                 type: 'registry:lib',
               },
             ],
           }
         ]
       }
     ]
   })

3. Create a folder named after the styles.

   • Directorydefault

     • Directoryui components

       • Button.tsx
     • Directorylib

       • utils.ts
   • registry.config.ts
   • package.json

4. Create a component

   default/ui/Button.tsx

   import * as React from "react"
   import { Slot } from "@radix-ui/react-slot"
   import { cva, type VariantProps } from "class-variance-authority"
   
   import { cn } from "@/lib/utils"
   
   const buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     {
       variants: {
         variant: {
           default:
             "bg-primary text-primary-foreground shadow hover:bg-primary/90",
           destructive:
             "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
           outline:
             "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
           secondary:
             "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
           ghost: "hover:bg-accent hover:text-accent-foreground",
           link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
           default: "h-9 px-4 py-2",
           sm: "h-8 rounded-md px-3 text-xs",
           lg: "h-10 rounded-md px-8",
           icon: "h-9 w-9",
         },
       },
       defaultVariants: {
         variant: "default",
         size: "default",
       },
     }
   )
   
   export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
       VariantProps<typeof buttonVariants> {
     asChild?: boolean
   }
   
   const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
       const Comp = asChild ? Slot : "button"
       return (
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
           ref={ref}
           {...props}
         />
       )
     }
   )
   Button.displayName = "Button"
   
   export { Button, buttonVariants }

5. Run the following command to generate the registry:

   npx registry-cn

6. Verify that the registry was generated successfully.

   • Directorypublic

     • Directoryr

       • Directorystyles

         • Directorydefault

           • button.json
           • index.json style definition with dependencies
           • utils.json
         • index.json list of all styles
       • index.json list of all components
   • …