@rare-ui/core
v0.1.1
Published
Rare Design System — Production-ready React components with tokens, dark mode, and accessibility
Downloads
23
Readme
@rare-ui/core
Production-ready React design system with 66 components, 560+ design tokens, zero-config dark mode, and full accessibility.
Install
npm install @rare-ui/core lucide-reactQuick Start
import '@rare-ui/core/styles.css';
import { Button, Badge, Tabs, TabsList, TabsTrigger, TabsContent } from '@rare-ui/core';
function App() {
return (
<div>
<Button hierarchy="primary" size="md">Get Started</Button>
<Badge color="brand" size="sm">New</Badge>
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="docs">Docs</TabsTrigger>
</TabsList>
<TabsContent value="overview">Welcome to Rare UI</TabsContent>
<TabsContent value="docs">Documentation here</TabsContent>
</Tabs>
</div>
);
}Dark Mode
Add data-theme="dark" to your <html> element. All tokens switch automatically — no extra setup.
document.documentElement.setAttribute('data-theme', 'dark');What's Included
Components (66)
Button, Badge, Tabs, Switch, Tooltip, Modal, Drawer, Accordion, Input, Checkbox, Radio, Slider, Table, Avatar, Breadcrumbs, Pagination, Stepper, Tag, Toast, Alert, DropdownMenu, CommandMenu, Chat, FileUpload, ProgressBar, ProgressCircle, LoadingIndicator, Skeleton, and more.
Organisms (4)
Navbar, HeroSection, PricingSection, FeatureSection — ready-made page sections.
Design Tokens (560+)
Colors (14 palettes), spacing (15 levels), typography (12 sizes), shadows (7 tiers), focus rings, border radius, and animation timing — all as CSS custom properties.
CSS Options
// Zero config — import and go
import '@rare-ui/core/styles.css';
// CSS layers — prevents specificity conflicts with your CSS
import '@rare-ui/core/styles.layer.css';Tailwind Integration (Power Users)
// tailwind.config.js
module.exports = {
presets: [require('@rare-ui/core/tailwind-preset')],
};Optional Sub-paths
Components with heavy dependencies are isolated into sub-path imports. Install the dep only if you use the component:
// Charts — requires: npm install recharts
import { LineBarChart, PieChart } from '@rare-ui/core/charts';
// Video Player — requires: npm install @vidstack/react
import { VideoPlayer } from '@rare-ui/core/video';
// Date Picker — requires: npm install date-fns react-day-picker
import { DatePicker } from '@rare-ui/core/datepicker';
// Carousel — requires: npm install embla-carousel-react
import { Carousel } from '@rare-ui/core/carousel';TypeScript
Full type declarations included. Every prop has JSDoc comments for IDE autocomplete.
import type { ButtonProps, BadgeProps, TabsProps } from '@rare-ui/core';Peer Dependencies
| Package | Required |
|---------|----------|
| react | >= 18.0.0 |
| react-dom | >= 18.0.0 |
| lucide-react | >= 0.300.0 |
License
MIT