A scalable, token-driven React design system. 75+ components built on Tailwind CSS v4, Radix UI & Framer Motion. Install the npm package or copy-paste with the CLI.
npm i @work-rjkashyap/unified-uinpx @work-rjkashyap/unified-ui add buttonLive components — try them
Buttons
Badges & Toggle
Input & Progress
Organized into strict, dependency-ordered layers — no upward imports. Composable by design, predictable by architecture.
Colors (oklch), spacing, radius, shadows, typography, z-index, and motion — all as CSS custom properties.
CSS variable-driven theming with DSThemeProvider. Light & dark mode with zero config.
Typography, Heading, Stack, Container, Divider — the foundation for consistent layout.
75+ production-ready composites on Radix UI. Button, Dialog, DataTable, Sidebar, and more.
Framer Motion animation presets — fadeIn, slideUp, scaleIn, stagger — ready to compose.
cn() via tailwind-merge, mergeSlots, contrast helpers, and focus-ring classes.
Strict Dependency Flow
Import from the barrel or layer-specific entry points. Only what you use ships to the client.
Every component uses class-variance-authority for type-safe, composable variant APIs.
All tokens and components respect dark mode via CSS custom properties — zero config.
Six dependency-ordered layers. No upward imports. Predictable, circular-dep-free architecture.
Built on Radix UI with proper ARIA attributes, keyboard navigation, and focus management.
First-class animation presets for page transitions, micro-interactions, and staggered reveals.
npm install away.Every component from shadcn/ui you love — plus DataTable, Sidebar, Calendar, TreeView, VirtualList, and more — packaged and ready.
Input, Select, Checkbox, Switch, Slider, Radio, DatePicker, NumberInput, PinInput.
Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip, ContextMenu.
DataTable, Table, Card, Badge, Avatar, Stat, Timeline, DataList, Calendar.
Sidebar, Tabs, Breadcrumb, NavigationMenu, Menubar, Pagination, Steps, Command.
Alert, Banner, Toast (Sonner), Progress, Spinner, Skeleton, EmptyState.
Stack, Container, Divider, Heading, Typography, AspectRatio, ScrollArea.
Same shadcn/ui philosophy — composable, accessible, beautifully styled — wrapped in a real, installable design system with tokens, layers, and versioning.
Everything in @work-rjkashyap/unified-ui — 75+ components, tokens, theme, motion, and utils.
Semver releases mean you can upgrade with confidence. Breaking changes documented, migrations clear.
Six dependency-ordered layers prevent circular deps and keep the system predictable at scale.
Proper ARIA attributes, keyboard navigation, and focus management baked into every component.
oklch() colors, spacing, radius tokens — all as CSS custom properties. Override a few, retheme everything.
Same Radix + Tailwind + CVA foundation, restructured as a proper design system with tokens and layers.
Install the full npm package for zero-config convenience, or copy-paste individual components for full ownership.
75+ components, design tokens, theme provider, motion presets, and utilities — all in one versioned npm package. Tree-shakeable and always in sync.
npm i @work-rjkashyap/unified-uiSetup Guide
npm i @work-rjkashyap/unified-uiimport "@work-rjkashyap/unified-ui/styles.css";import { DSThemeProvider } from "@work-rjkashyap/unified-ui/theme";
export default function Layout({ children }) {
return <DSThemeProvider>{children}</DSThemeProvider>;
}import { Button, Dialog, Badge } from "@work-rjkashyap/unified-ui";Best for teams that want zero-config setup, automatic updates, and consistent components across projects.
Best for developers who want full control over source, deep customization, or the shadcn/ui workflow.
Both methods use the same components, tokens, and accessibility. Inspired by shadcn/ui · Open source under MIT