Getting Started
Installation
-
Install it by running the following command in your terminal:
Terminal window npm install registry-cnTerminal window pnpm add registry-cnTerminal window yarn add registry-cn -
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',},],}]}]}) -
Create a folder named after the styles.
Directorydefault
Directoryui components
- Button.tsx
Directorylib
- utils.ts
- registry.config.ts
- package.json
-
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 ButtonPropsextends 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 (<CompclassName={cn(buttonVariants({ variant, size, className }))}ref={ref}{...props}/>)})Button.displayName = "Button"export { Button, buttonVariants } -
Run the following command to generate the registry:
Terminal window npx registry-cn
-
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
- …