@yourusername/shadcn-components

A custom component library built with shadcn/ui that can be installed via the shadcn CLI.

Components

• FancyCard: A card component with gradient options and hover effects

Installation

For Developers Contributing to This Library

1. Clone this repository
2. Install dependencies:

   npm install

3. Build the registry:

   npm run build:registry

For Users of This Library

1. Make sure you have a shadcn/ui project set up with a components.json file
2. Add this registry to your components.json:

   {
     "style": "default",
     "tailwind": {
       "config": "tailwind.config.ts",
       "css": "app/globals.css",
       "baseColor": "slate",
       "cssVariables": true
     },
     "aliases": {
       "components": "@/components",
       "utils": "@/lib/utils"
     },
     "registries": [
       {
         "name": "@yourusername/shadcn-components",
         "url": "npm:@yourusername/shadcn-components"
       }
     ]
   }

3. Install components using the shadcn CLI:

   npx shadcn@latest add fancy-card

Adding New Components

1. Create your component in src/components/ui/
2. Add metadata to the component using JSDoc comments:

   /**
    * @shadcn-metadata
    * {
    *   "title": "Component Title",
    *   "description": "Component description",
    *   "dependencies": ["dependency1", "dependency2"],
    *   "registryDependencies": ["button", "other-shadcn-component"]
    * }
    */

3. Add the component name to registry/index.ts
4. Build the registry:

   npm run build:registry

Publishing

1. Update the version in package.json
2. Build the library:

   npm run build

3. Publish to npm:

   npm publish

Development

• Run npm run dev to watch for changes in TypeScript files
• Run npm run build:registry to rebuild the registry files

License

MIT