Skip to content

Getting Started

Installation

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

    Terminal window
    npm install 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:

    Terminal window
    npx registry-cn
  1. 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