Components

Overview

Unified UI ships 75+ composite components that compose the design system's tokens, theme, and primitives into production-ready interactive elements. Every component is:

• Token-driven — All colors, spacing, radii, and motion come from CSS custom properties.
• Accessible — Built on Radix UI primitives with full WCAG AA compliance.
• Variant-composed — Uses CVA (class-variance-authority) for type-safe variant APIs.
• Ref-forwarding — Every component forwards refs for imperative access.
• Theme-aware — Automatically adapts to light/dark mode via CSS variables.
• Motion-ready — Framer Motion presets built-in, respecting prefers-reduced-motion.
• Two distribution modes — Install the npm package or copy individual components with the CLI.

Installation

Unified UI supports two distribution modes — install the full npm package or copy individual components into your project with the CLI. Choose the approach that fits your workflow.

Option A: Copy & Paste CLI

Use the CLI to add individual components to your project. You own the source, can customize freely, and the CLI resolves all dependencies automatically.

Initial setup

Before adding components, initialize your project config and path aliases:

npx @work-rjkashyap/unified-ui init

pnpm dlx @work-rjkashyap/unified-ui init

npx @work-rjkashyap/unified-ui init

bunx @work-rjkashyap/unified-ui init

Add components

Add one or more components by name. The CLI copies the source files into your project and installs any required npm dependencies.

# Add a single component
npx @work-rjkashyap/unified-ui add button

# Add multiple components at once
npx @work-rjkashyap/unified-ui add button card badge tabs dialog

# Add all available components
npx @work-rjkashyap/unified-ui add --all

pnpm dlx @work-rjkashyap/unified-ui add button

pnpm dlx @work-rjkashyap/unified-ui add button card badge tabs dialog

pnpm dlx @work-rjkashyap/unified-ui add --all

npx @work-rjkashyap/unified-ui add button

npx @work-rjkashyap/unified-ui add button card badge tabs dialog

npx @work-rjkashyap/unified-ui add --all

bunx @work-rjkashyap/unified-ui add button

bunx @work-rjkashyap/unified-ui add button card badge tabs dialog

bunx @work-rjkashyap/unified-ui add --all

Then import from your local project:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

Overwrite existing files

If you've previously added a component and want to pull the latest version, use the --overwrite flag:

npx @work-rjkashyap/unified-ui add button --overwrite

pnpm dlx @work-rjkashyap/unified-ui add button --overwrite

npx @work-rjkashyap/unified-ui add button --overwrite

bunx @work-rjkashyap/unified-ui add button --overwrite

List & diff

Check what's available and compare your local files against the registry:

# List all available components in the registry
npx @work-rjkashyap/unified-ui list

# Compare your local component against the latest registry version
npx @work-rjkashyap/unified-ui diff button

CLI commands reference

Option B: Full npm Package

Use this approach if you prefer a traditional library install. All components are available immediately — no CLI setup required.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Import the stylesheet in your app's entry point (e.g. layout.tsx or globals.css):

import "@work-rjkashyap/unified-ui/styles.css";

Then import components directly:

import { Button, Input, Card, Dialog } from "@work-rjkashyap/unified-ui";

Or use layer-specific imports for better tree-shaking:

import { Button, Input } from "@work-rjkashyap/unified-ui/components";
import { spacing, radius } from "@work-rjkashyap/unified-ui/tokens";
import { DSThemeProvider } from "@work-rjkashyap/unified-ui/theme";
import { slideUp } from "@work-rjkashyap/unified-ui/motion";
import { cn } from "@work-rjkashyap/unified-ui/utils";

Comparison: CLI vs npm Package

Component Catalog

Form Controls (21 components)

Interactive elements for capturing user input.

Data Display (18 components)

Components for presenting information and content.

Feedback (9 components)

Components for communicating status and information to users.

Overlay (9 components)

Components that render above the page content.

Navigation (13 components)

Components for moving between views and content sections.

Layout (3 components)

Structural components for building adjustable, responsive layouts.

Utility (2 components)

Low-level building blocks and accessibility helpers.

Common Patterns

Variant + Size API

Most components follow a consistent variant + size API powered by CVA:

<Button variant="primary" size="md">Save</Button>
<Input variant="error" size="sm" />
<Badge variant="success" size="md">Active</Badge>
<Badge variant="primary" size="sm" animated>React</Badge>
<Slider variant="primary" size="md" defaultValue={[50]} />

Data Attributes

Every component renders data-ds-* attributes for styling hooks and debugging:

<button
	data-ds
	data-ds-component="button"
	data-ds-variant="primary"
	data-ds-size="md"
>
	Save
</button>

Slot Composition

Complex components use a slot-based pattern with sub-components:

<Card>
	<CardHeader>Title</CardHeader>
	<CardBody>Content</CardBody>
	<CardFooter>
		<Button size="sm">Action</Button>
	</CardFooter>
</Card>

Motion & Reduced Motion

All animated components use Framer Motion presets and respect prefers-reduced-motion automatically:

{/* Animations play normally */}
<Spinner />
<Collapsible />
<PinInput length={6} error />

{/* All animations are automatically disabled when:
    @media (prefers-reduced-motion: reduce) */}