Shadcn Storybook Registry

A comprehensive component registry for shadcn/ui with Storybook integration, featuring over 130+ components organized in a layered architecture.

🚀 Quick Start

Use components from this registry with the shadcn CLI:

# Add a component from this registry
npx shadcn@latest add https://your-domain.com/registry/button-story

# Or use the raw GitHub URL
npx shadcn@latest add https://raw.githubusercontent.com/yourusername/your-repo/main/public/v2/r/button-story.json

📦 What's Included

This registry extends the standard shadcn/ui components with:

• 47 Layer 1 Components: Base shadcn/ui components with comprehensive Storybook stories
• 80+ Layer 2 Components: Advanced composed components including:
  • 19 System Components: Complex multi-file components (DataTable, FormBuilder, etc.)
  • 24 Utility Components: Single-file focused components
  • 42 Interactive Components: Rich interaction components with drag-drop, keyboard navigation, and more
• 4+ Layer 3 Components: Full dashboard implementations

🏗️ Architecture

Layer 1: UI Components

Base components from shadcn/ui that serve as building blocks. These are atomic components that provide fundamental UI functionality.

Layer 2: Advanced Components

Complex components built by composing Layer 1 components, organized into:

• Systems: Multi-file components with complex functionality
• Utilities: Single-file components with focused functionality
• Interactive: Components focused on rich user interactions

Layer 3: Dashboard Components

Complete dashboard implementations and page-level components.

🔧 Setting Up Your Own Registry

This repository is set up as a custom shadcn registry. To use it:

1. Clone this repository

   git clone https://github.com/yourusername/your-repo.git
   cd your-repo

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. View Storybook

   npm run storybook

📚 Using Components

From the Registry

Components can be installed directly using the shadcn CLI:

# Layer 1 component
npx shadcn@latest add https://your-domain.com/registry/button-story

# Layer 2 system component
npx shadcn@latest add https://your-domain.com/registry/command-palette

# Layer 2 utility component
npx shadcn@latest add https://your-domain.com/registry/data-card

Registry Structure

The registry follows the shadcn registry specification:

• registry.json: Main registry configuration
• public/v2/r/: Generated registry item JSON files
• components/: Source components
• stories/: Storybook stories

🎨 Customization

Updating the Registry

1. Modify components in the components/ directory
2. Update stories in the stories/ directory
3. Build the registry:

   npm run registry:build

Adding New Components

1. Create your component following the layer structure
2. Add a story file
3. Update registry.json with your component entry
4. Build and test

🔗 Integration with v0

All components are compatible with v0.dev. Each component in the registry table includes an "Open in v0" button for easy editing and customization.

📝 Documentation

• Component Architecture
• Storybook
• shadcn/ui Registry Docs

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

Built on top of shadcn/ui by @shadcn.