Getting Started

Welcome to Shadix UI - an open source custom shadcn/ui component registry featuring enhanced components with modern animations and interactions.

What is Shadix UI?

Shadix UI is a curated collection of React components built on top of shadcn/ui, enhanced with Framer Motion animations and custom variants. Our components are designed to provide a seamless developer experience while maintaining the flexibility and customization options you expect from shadcn/ui.

Open Source Philosophy

🚀 Shadix UI is completely open source! Following the shadcn/ui philosophy, our components are designed for maximum adaptability:

• Copy & Paste Approach - Components are distributed as source code, not npm packages
• Full Customization - Modify styles, adjust logic, or integrate with other tools
• No Dependencies - Free from the limitations of traditional component libraries
• Community Driven - Built by developers, for developers
• MIT Licensed - Use in personal and commercial projects

Why Choose Shadix UI?

While shadcn/ui provides excellent core components, it lacks animated variants and motion customization options. Shadix UI fills this gap by offering:

• Smooth Animations - Enhanced components with Framer Motion integration
• Custom Variants - Diverse styling options beyond standard shadcn/ui
• Modern Interactions - Popup animations, transitions, and micro-interactions
• Easy Integration - Works seamlessly with existing shadcn/ui projects
• TypeScript Support - Full type safety and IntelliSense

Getting Started

Ready to enhance your React application with animated components? Get started with Shadix UI in just a few minutes.

Quick Start

1. Configure the registry in your components.json:

   {
       "registries": {
           "@shadix-ui": "https://shadix-ui.vercel.app/r/{name}.json"
       }
   }

2. Install components using the shadcn CLI:

   npx shadcn@latest add @shadix-ui/action-button

For detailed installation instructions, prerequisites, and troubleshooting, see the Installation Guide.

Features

• 🎨 Custom Variants - Enhanced styling options beyond standard shadcn/ui
• 🎭 Framer Motion - Smooth animations and transitions
• 📱 Responsive Design - Mobile-first approach
• ♿ Accessibility - Built with accessibility in mind
• 🎯 TypeScript - Full TypeScript support
• 🎨 Tailwind CSS - Utility-first styling

Frequently Asked Questions

Is Shadix UI free to use?

Yes! Shadix UI is completely free and open source with no licensing fees or restrictions.

Can I use Shadix UI with my existing shadcn/ui project?

Absolutely! Shadix UI components are designed to work seamlessly with existing shadcn/ui projects and follow the same patterns.

How do I install Shadix UI components?

Use the shadcn CLI to add components directly to your project. See the Installation section above for detailed steps.

Can I modify the components after installation?

Yes! That's the beauty of the copy-and-paste approach. Once installed, the code is yours to customize however you need.

What license does Shadix UI use?

Shadix UI is licensed under the MIT License, allowing use in both personal and commercial projects.

Contributing

🌟 We welcome contributions from the open source community!

Whether you're fixing bugs, adding new components, improving documentation, or suggesting features - your contributions help make Shadix UI better for everyone.

Please see our Contributing Guide for details on how to:

• Submit bug reports and feature requests
• Contribute new components
• Improve existing components
• Help with documentation
• Join our community discussions

Resources