Beautiful • Animated • Production Ready
RareUI is a free, open-source component library that helps you build beautiful, modern web interfaces without starting from scratch. Every component is crafted with attention to detail, featuring smooth animations, dark mode support, and responsive design.
|
🎯 Core Features
|
🎨 Design Excellence
|
The fastest way to add components to your project:
# Install a single component
npx rareui add glass-shimmer-button
# Install multiple components
npx rareui add liquid-button particle-card- Visit rareui.in
- Browse components
- Click "Copy Code"
- Paste into your project
That's it! ✨
|
|
- Forms & Inputs - Text fields, dropdowns, checkboxes
- Navigation - Navbars, sidebars, breadcrumbs
- Modals & Overlays - Dialogs, popovers, tooltips
- Data Display - Tables, lists, grids
- Feedback - Alerts, toasts, progress bars
- And 100+ more components!
import { GlassShimmerButton } from '@/components/ui/glass-shimmer-button';
export default function App() {
return (
<GlassShimmerButton onClick={() => console.log('Clicked!')}>
Click Me
</GlassShimmerButton>
);
}That's it! Every component is:
- ✅ Fully typed with TypeScript
- ✅ Accessible (keyboard navigation, ARIA labels)
- ✅ Customizable via props and Tailwind classes
- ✅ Production-ready
RareUI is built with modern, industry-standard technologies:
| Technology | Purpose |
|---|---|
| React 19 | UI Library |
| Next.js 16 | Framework |
| TypeScript 5 | Type Safety |
| Tailwind CSS 4 | Styling |
| Framer Motion 12 | Animations |
| Lucide React | Icons |
Comprehensive docs for every component:
- 📘 Installation Guide - Get started in 2 minutes
- 🎨 Component Showcase - Browse all components
- ⚙️ Customization - Learn how to customize
- 🎯 Best Practices - Tips for optimal usage
- 🚀 Performance - Keep your app fast
Perfect for building:
|
|
We ❤️ contributions! Help make RareUI better:
- 🐛 Report bugs - Found an issue? Open an issue
- 💡 Suggest features - Have an idea? We'd love to hear it
- 🎨 Add components - Create new components
- 📝 Improve docs - Help others understand better
- ⭐ Star the repo - Show your support!
# Clone the repository
git clone https://github.com/Codewithswappy/RareUI.git
# Install dependencies
cd RareUI
npm install
# Start development server
npm run dev
# Build for production
npm run build- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-component - Make your changes
- Test thoroughly
- Commit:
git commit -m 'Add amazing component' - Push:
git push origin feature/amazing-component - Open a Pull Request
→ Read contributing guidelines
RareUI is MIT licensed. You can:
- ✅ Use commercially
- ✅ Modify freely
- ✅ Distribute
- ✅ Use privately
See LICENSE for details.
If you find RareUI helpful:
| ⭐ Star on GitHub | 🐦 Follow on Twitter | 📢 Share Feedback |
Every star ⭐ motivates us to keep improving RareUI!
|
Website |
Documentation |
Twitter |
GitHub |
Join our growing community:
- 🐦 Twitter: Share your builds with @heyyswap
- 💼 LinkedIn: Connect at swapnilkalambe4
- 🐙 GitHub: Star and watch for updates
- 📧 Email: Questions? Reach out!
RareUI is inspired by and built with:
- Tailwind CSS - Amazing utility-first CSS framework
- Framer Motion - Beautiful animations
- shadcn/ui - Inspiration for component architecture
- Aceternity UI - Design inspiration
- Magic UI - Animation concepts
Special thanks to the open-source community! 🙌
|
Till Feb 2026
|
Till May 2026
|