Introduction

Welcome to RareUI - A premium collection of React UI components built with Tailwind CSS and Framer Motion.

What is RareUI?

RareUI is a comprehensive collection of 100+ free, open-source React components designed to help you build stunning web applications faster. Every component is crafted with attention to detail, featuring smooth animations, modern designs, and production-ready code.

Built With Modern Tech

  • React 18+ - Latest React features and best practices
  • Tailwind CSS - Utility-first styling for easy customization
  • Framer Motion - Smooth, performant animations
  • TypeScript - Full type safety and IntelliSense support
  • Next.js 14+ - Server components and app router ready

Why Choose RareUI?

🎨 Premium Designs

Every component features modern, professional designs that stand out. No more generic-looking UIs.

⚡ Copy-Paste Ready

No installation dependencies or complex setup. Copy the code and paste it into your project. It just works.

🎭 Smooth Animations

Built-in animations powered by Framer Motion make your UI feel alive and engaging.

🌙 Dark Mode Native

All components support dark mode out of the box using CSS variables.

🎯 Production Ready

Every component is tested, optimized, and ready for production use.

🔧 Fully Customizable

Components are installed as source code in your project, so you have complete control to customize them.

Philosophy

RareUI is built on three core principles:

  1. Developer Experience First - Commands are simple, docs are clear, and components work out of the box.
  2. Design Excellence - Every component should look premium and feel polished.
  3. Zero Lock-in - Code lives in your project. Modify, extend, or remove components as needed.

What Makes RareUI Different?

Unlike traditional component libraries, RareUI:

  • ✅ No npm package to install - Copy-paste the exact code you need
  • ✅ No version conflicts - Your code, your control
  • ✅ No bloat - Only add what you use
  • ✅ No vendor lock-in - Components live in your codebase
  • ✅ Full customization - Edit the source directly

Component Categories

Buttons

Premium button components with unique animations:

  • Liquid Button with gooey effect
  • Glass Shimmer Button with glassmorphism
  • 3D Neumorphism Button
  • Soft Button with shadow animations
  • And more...

Cards

Interactive cards with stunning effects:

  • Particle Card with explosive hover
  • Premium Profile Card with 3D tilt
  • Coming soon: Product cards, pricing cards, testimonial cards

Forms (Coming Soon)

Beautiful form components:

  • Animated inputs
  • Select dropdowns
  • Toggle switches
  • Range sliders

Modern navigation components:

  • Glassmorphic navbars
  • Animated sidebars
  • Command palettes
  • Breadcrumbs

Getting Started

There are two ways to use RareUI:

The fastest way to add components:

# Initialize RareUI
npx rareui@latest init

# Add any component
npx rareui@latest add liquid-button

Note: Using pnpm, yarn, or bun? Replace npx with pnpm dlx, yarn dlx, or bunx respectively. Most users have npm (comes with Node.js) and can use npx out of the box.

Option 2: Manual Copy-Paste

Browse the components, copy the code, and paste into your project. No CLI required.

Community

RareUI is open source and community-driven. We'd love to hear from you:

FAQ

Is RareUI really free?

Yes! RareUI is 100% free and open source under the MIT license. Use it in personal projects, commercial projects, anywhere you like.

Do I need to credit RareUI?

No attribution required, but we appreciate it! A GitHub star would be awesome too ⭐

Can I use this with other frameworks?

Currently optimized for React and Next.js with Tailwind CSS. Support for other frameworks may come in the future.

How is this different from shadcn/ui?

Both are great! Key differences:

  • RareUI: Focus on premium designs and animations, unique components
  • shadcn/ui: Focus on accessible primitives and solid foundations

Use RareUI when you want standout designs. Use shadcn for solid, accessible basics. Or use both!

How often are new components added?

We're constantly adding new components. Follow @heyyswap for updates!

Support the Project

If you find RareUI helpful:

What's Next?

Ready to build something amazing? Check out:

Built with ❤️ by

Swappy

Open source and free forever
Previous
Next