Rare UI

Overview

Rare UI (rareui.com) is a free and open-source registry of distinctive, creative React components and interactive widgets. Featuring 500+ GitHub Stars, Rare UI curates non-standard, eye-catching interface elements—such as Fluid Orb gradients, gravity letter physics, audio visualizers, and polished duration pickers—ready for instant copy-paste into Tailwind CSS projects.

Key Features

• Distinctive & Rare Widgets: Unique components not found in standard UI libraries (e.g. Gravity Letters, Liquid Glass, Fluid Orb, Radial Sliders).
• shadcn CLI Native: Add components directly to your workspace using the standard shadcn CLI command.
• Modern Stack Foundations: Built with Next.js 15, Tailwind CSS, and TypeScript with complete prop definitions.
• Zero Config Theming: Seamlessly inherits your project's CSS variables, border radius tokens, and dark mode palette.

Installation & Quick Start

# Install via shadcn CLI
npx shadcn@latest add "https://rareui.com/r/fluid-orb.json"

import React from 'react';
import { FluidOrb } from '@/components/ui/fluid-orb';

export function HeroVisual() {
  return (
    <div className="relative w-full h-64 flex items-center justify-center overflow-hidden rounded-3xl bg-card border border-border">
      <FluidOrb speed={1.2} blur="xl" className="opacity-80" />
      <span className="relative z-10 font-bold text-xl text-foreground font-heading">
        Next-Gen Spatial UI
      </span>
    </div>
  );
}

Why Choose Rare UI?

1. Uniqueness Factor: Break free from homogenous SaaS templates with playful, distinctive micro-interactions.
2. Clean Component Architecture: Self-contained React components that drop right into your components directory.