Starter Kits

Scaffold a new project with Unified UI pre-configured for your framework of choice.

Overview

Unified UI starter kits let you scaffold a fully configured project in one command. Instead of manually installing packages and editing config files, pick a template and go.

There are two ways to get started:

CLI scaffolding — runs the official framework scaffolding tool and overlays Unified UI config automatically.
Clone a template repo — each template is published to its own GitHub repository that you can clone, fork, or degit.

Available Templates

Template	Framework	Repo	What's included
Next.js	Next.js 16, App Router	unified-ui-template-nextjs	Full 75+ component library, SSR-ready, Tailwind CSS v4
Vite + React	React 19, Vite 7	unified-ui-template-react	Full 75+ component library, DSThemeProvider, Tailwind CSS v4
TanStack Router	React 19, Vite 7, TanStack Router	unified-ui-template-tanstack-router	Full 75+ component library, file-based routing, Tailwind CSS v4
Vue.js	Vue 3, Vite	—	10 Vue SFC components, design tokens, Tailwind CSS v4
Laravel Blade	Laravel 12, Blade	unified-ui-template-laravel	10 Blade anonymous components, design tokens, Tailwind CSS v4

React starters (Next.js, Vite + React, TanStack Router) include the full 75+ component library via the @work-rjkashyap/unified-ui npm package. Vue & Laravel starters include 10 framework-native UI components (Button, Badge, Card, Input, Alert, Heading, Text, etc.) plus all design tokens.

Option A: CLI Scaffolding

Run a single command and the CLI handles everything — framework setup, Unified UI installation, overlay files, and git init.

npx @work-rjkashyap/unified-ui init -t

The CLI will:

Ask which framework you want to use
Run the official scaffolding tool (create-vite, create-next-app, etc.)
Install Unified UI and framework-specific dependencies
Apply overlay files — CSS imports, theme providers, demo pages
Initialize git with a clean commit

Specify a template directly

npx @work-rjkashyap/unified-ui init -t nextjs my-app
npx @work-rjkashyap/unified-ui init -t vite-react my-app
npx @work-rjkashyap/unified-ui init -t vuejs my-app
npx @work-rjkashyap/unified-ui init -t laravel-blade my-app

Interactive mode

If you omit the template name, the CLI presents an interactive picker:

npx @work-rjkashyap/unified-ui init -t

#  Which framework do you want to use?
#
#    1. Vite + React          Vite + React 19 SPA with full component library
#    2. Next.js               Next.js App Router with SSR + full component library
#    3. TanStack Router       React 19 + Vite + TanStack Router with full component library
#    4. Vue.js                Vue 3 + Vite with UI components & Tailwind theme
#    5. Laravel Blade          Laravel with Blade UI components & Tailwind theme
#
#  Select (1-5):

Option B: Clone a Template Repo

Each template is also published to its own standalone GitHub repository. Use these when you prefer to fork, clone, or degit directly without the CLI.

Repo: github.com/imrj05/unified-ui-template-nextjs

Create the project

npx create-next-app --example https://github.com/imrj05/unified-ui-template-nextjs my-app

Or with degit:

npx degit imrj05/unified-ui-template-nextjs my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:3000 to see the result.

What's included:

Next.js 16 with App Router, React 19, TypeScript
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/postcss
DSThemeProvider pre-configured in app/layout.tsx
Demo page showcasing components and theme toggle

Repo: github.com/imrj05/unified-ui-template-react

Create the project

npx degit imrj05/unified-ui-template-react my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:5173 to see the result.

What's included:

React 19 with TypeScript
Vite 7 with @vitejs/plugin-react-swc for fast HMR
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/vite plugin (no PostCSS config needed)
DSThemeProvider pre-configured in src/App.tsx
Demo page showcasing components and theme toggle

Repo: github.com/imrj05/unified-ui-template-tanstack-router

Create the project

npx degit imrj05/unified-ui-template-tanstack-router my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:3000 to see the result.

What's included:

React 19 with TypeScript
Vite 7 with TanStack Router — 100% type-safe, file-based routing with nested layouts
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/vite plugin
DSThemeProvider pre-configured in src/routes/__root.tsx
Header with navigation, footer, and theme toggle
Demo pages showcasing components

Repo: github.com/imrj05/unified-ui-template-laravel

Create the project

npx degit imrj05/unified-ui-template-laravel my-app
cd my-app

Install dependencies

composer install
npm install
cp .env.example .env
php artisan key:generate

Start developing

npm run dev
php artisan serve

Open http://localhost:8000 to see the result.

What's included:

Laravel 12 with Blade templating
Vite with @tailwindcss/vite plugin
10 Blade anonymous components: <x-ui.button>, <x-ui.badge>, <x-ui.card>, <x-ui.input>, <x-ui.alert>, <x-ui.heading>, <x-ui.text>, and card sub-components
JS-based theme toggle with localStorage persistence
All CSS design tokens and Tailwind utilities available
Demo welcome page showcasing all components

How Templates Are Wired

Every template follows the same three-step pattern to integrate Unified UI:

1. Import styles

The CSS file is imported before Tailwind, and a @source directive tells Tailwind v4 to scan the compiled bundle for utility classes:

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

@source "../node_modules/@work-rjkashyap/unified-ui/dist";

2. Wrap with theme provider

React templates wrap the app with DSThemeProvider which mounts the CSS custom property token system and handles light/dark mode:

import { DSThemeProvider } from "@work-rjkashyap/unified-ui/theme";

export default function App({ children }) {
	return <DSThemeProvider>{children}</DSThemeProvider>;
}

3. Import and use components

// Barrel import — simple
import { Button, Badge, Card, Tabs } from "@work-rjkashyap/unified-ui";

// Layer-specific imports — better tree-shaking
import { Button } from "@work-rjkashyap/unified-ui/components";
import { fadeIn } from "@work-rjkashyap/unified-ui/motion";
import { cn } from "@work-rjkashyap/unified-ui/utils";

What Gets Modified (CLI Scaffolding)

After the framework's official scaffolding runs, the CLI overlays these files:

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` plugin
`src/index.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/main.tsx`	Replaced — wraps app with `DSThemeProvider`
`src/App.tsx`	Replaced — demo page with components + theme toggle

File	Action
`src/app/globals.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/app/layout.tsx`	Replaced — adds `ThemeProvider` + `DSThemeProvider`
`src/app/page.tsx`	Replaced — demo page with components + theme toggle

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` + TanStack Router plugins
`src/styles.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/routes/__root.tsx`	Replaced — wraps app with `DSThemeProvider`
`src/routes/index.tsx`	Replaced — demo page with components + theme toggle
`src/components/`	Created — Header, Footer, ThemeToggle components

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` plugin
`src/style.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/main.ts`	Replaced — clean Vue entry with CSS import
`src/lib/cn.ts`	Created — `cn()` utility (clsx + tailwind-merge)
`src/App.vue`	Replaced — demo page with component showcase
`src/components/ThemeToggle.vue`	Created — dark/light toggle component
`src/components/ui/*.vue`	Created — 10 UI components (Button, Badge, Card, Input, Alert, Heading, Text, etc.)
`src/components/ui/index.ts`	Created — barrel export for all UI components

File	Action
`vite.config.js`	Replaced — adds `@tailwindcss/vite` plugin
`resources/css/app.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`resources/js/app.js`	Replaced — adds theme toggle logic
`resources/views/layouts/app.blade.php`	Created — base layout with `@vite`
`resources/views/welcome.blade.php`	Replaced — demo page with component showcase
`resources/views/components/ui/*.blade.php`	Created — 10 Blade anonymous components (button, badge, card, input, alert, heading, text, etc.)

Components Included

React Templates (Next.js, Vite + React, TanStack Router)

React starters ship with the full @work-rjkashyap/unified-ui package — all 75+ components are available immediately:

Category	Components
Form Controls	Button, Input, Input Group, Textarea, Checkbox, Radio, Switch, Select, Combobox, Slider, Date Picker, Color Picker, File Upload, Number Input, Pin Input, Search Input, Form Field, Label, Toggle, Toggle Group, Calendar
Data Display	Card, Badge, Avatar, Table, Data Table, Data Table Toolbar, Data List, Accordion, Tabs, Stat, Timeline, Steps, Code, Kbd, Carousel, Chart, Aspect Ratio, Image Gallery
Feedback	Alert, Banner, Toast / Sonner, Progress, Skeleton, Spinner, Empty State, Confirm Dialog, Markdown
Overlay	Dialog, Alert Dialog, Sheet, Drawer, Popover, Tooltip, Hover Card, Dropdown Menu, Context Menu
Navigation	Breadcrumb, Pagination, Navigation Menu, Menubar, Command, Sidebar, Scroll Area, Collapsible, Resizable, Tree View, Infinite Scroll, Virtual List, Copy Button
Layout	Separator, Video Player, Visually Hidden
Theme	Theme Toggle

Browse the full Component Reference →

Vue.js & Laravel Blade Templates

Vue and Laravel starters include 10 framework-native UI components — same design tokens, same Tailwind classes, same visual output:

Vue.js Components

<script setup>
import {
	UiButton,
	UiBadge,
	UiCard,
	UiCardHeader,
	UiCardBody,
	UiAlert,
	UiHeading,
	UiText,
} from "@/components/ui";
</script>

<template>
	<UiCard>
		<UiCardHeader>
			<UiHeading :level="2">Dashboard</UiHeading>
		</UiCardHeader>
		<UiCardBody>
			<UiAlert variant="info" title="Welcome">You're all set.</UiAlert>
			<UiButton variant="primary">Continue</UiButton>
			<UiBadge variant="success">Active</UiBadge>
		</UiCardBody>
	</UiCard>
</template>

Laravel Blade Components

<x-ui.card>
    <x-ui.card-header>
        <x-ui.heading :level="2">Dashboard</x-ui.heading>
    </x-ui.card-header>
    <x-ui.card-body>
        <x-ui.alert variant="info" title="Welcome">You're all set.</x-ui.alert>
        <x-ui.button variant="primary">Continue</x-ui.button>
        <x-ui.badge variant="success">Active</x-ui.badge>
    </x-ui.card-body>
</x-ui.card>

Component Props Reference

Component	Props
`Button`	`variant` (primary, secondary, ghost, danger), `size` (sm, md, lg), `loading`, `fullWidth`, `iconOnly`, `disabled`
`Badge`	`variant` (default, primary, secondary, success, warning, danger, info, outline), `size` (sm, md, lg), `dismissible`
`Card`	`variant` (default, outlined, elevated, interactive), `padding` (compact, comfortable), `fullWidth`
`Input`	`variant` (default, error, success), `size` (sm, md, lg), `disabled`
`Alert`	`variant` (info, success, warning, danger, default), `title`, `dismissible`
`Heading`	`level` (1–4), `color` (default, muted, primary)
`Text`	`variant` (body, bodySm, caption, label, overline, code), `color` (default, muted, primary, success, warning, danger, info)

Customising the Theme

All design tokens are exposed as CSS custom properties. Override them in your global CSS file after the Unified UI import:

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

@source "../node_modules/@work-rjkashyap/unified-ui/dist";

/* Override tokens */
:root {
	--primary: oklch(0.55 0.2 260);
	--radius-md: 0.75rem;
}

Using Tokens Directly

All CSS design tokens are also available as raw CSS custom properties and Tailwind utility classes — even if you don't use any React components.

CSS Custom Properties

.my-component {
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition-duration: var(--duration-fast);
}

Tailwind Utility Classes

<div
	class="bg-primary text-primary-foreground rounded-md shadow-sm duration-fast"
>
	Token-driven styling
</div>

Available Token Categories

Category	Tailwind Examples
Colors	`bg-primary`, `text-foreground`, `border-border`
Radius	`rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`
Shadows	`shadow-sm`, `shadow-md`, `shadow-lg`
Z-index	`z-dropdown`, `z-modal`, `z-toast`
Duration	`duration-fast`, `duration-normal`, `duration-slow`
Easing	`ease-standard`, `ease-entrance`, `ease-exit`
Fonts	`font-sans`, `font-mono`

See the full Design Tokens reference for all available tokens.

Template Repos & Contributing

All templates live inside the template/ directory of the unified-ui monorepo and are automatically mirrored to standalone read-only GitHub repos via CI.

To modify a template:

Make your changes inside template/unified-ui-<name>/ in the unified-ui monorepo.
Commit and push to main.
The CI workflow automatically syncs changes to the corresponding read-only repo within minutes.

Never commit directly to a read-only template repo — those pushes will be overwritten on the next sync.

Template	Monorepo Directory	Read-only Repo
Next.js	`template/unified-ui-nextjs/`	unified-ui-template-nextjs
React (Vite)	`template/unified-ui-vite/`	unified-ui-template-react
TanStack Router	`template/unified-ui-tanstack-router/`	unified-ui-template-tanstack-router
Laravel	`template/unified-ui-laravel/`	unified-ui-template-laravel

Overview

Unified UI starter kits let you scaffold a fully configured project in one command. Instead of manually installing packages and editing config files, pick a template and go.

There are two ways to get started:

CLI scaffolding — runs the official framework scaffolding tool and overlays Unified UI config automatically.
Clone a template repo — each template is published to its own GitHub repository that you can clone, fork, or degit.

Available Templates

Template	Framework	Repo	What's included
Next.js	Next.js 16, App Router	unified-ui-template-nextjs	Full 75+ component library, SSR-ready, Tailwind CSS v4
Vite + React	React 19, Vite 7	unified-ui-template-react	Full 75+ component library, DSThemeProvider, Tailwind CSS v4
TanStack Router	React 19, Vite 7, TanStack Router	unified-ui-template-tanstack-router	Full 75+ component library, file-based routing, Tailwind CSS v4
Vue.js	Vue 3, Vite	—	10 Vue SFC components, design tokens, Tailwind CSS v4
Laravel Blade	Laravel 12, Blade	unified-ui-template-laravel	10 Blade anonymous components, design tokens, Tailwind CSS v4

Option A: CLI Scaffolding

Run a single command and the CLI handles everything — framework setup, Unified UI installation, overlay files, and git init.

npx @work-rjkashyap/unified-ui init -t

The CLI will:

Ask which framework you want to use
Run the official scaffolding tool (create-vite, create-next-app, etc.)
Install Unified UI and framework-specific dependencies
Apply overlay files — CSS imports, theme providers, demo pages
Initialize git with a clean commit

Specify a template directly

npx @work-rjkashyap/unified-ui init -t nextjs my-app
npx @work-rjkashyap/unified-ui init -t vite-react my-app
npx @work-rjkashyap/unified-ui init -t vuejs my-app
npx @work-rjkashyap/unified-ui init -t laravel-blade my-app

Interactive mode

If you omit the template name, the CLI presents an interactive picker:

npx @work-rjkashyap/unified-ui init -t

#  Which framework do you want to use?
#
#    1. Vite + React          Vite + React 19 SPA with full component library
#    2. Next.js               Next.js App Router with SSR + full component library
#    3. TanStack Router       React 19 + Vite + TanStack Router with full component library
#    4. Vue.js                Vue 3 + Vite with UI components & Tailwind theme
#    5. Laravel Blade          Laravel with Blade UI components & Tailwind theme
#
#  Select (1-5):

Option B: Clone a Template Repo

Each template is also published to its own standalone GitHub repository. Use these when you prefer to fork, clone, or degit directly without the CLI.

Repo: github.com/imrj05/unified-ui-template-nextjs

Create the project

npx create-next-app --example https://github.com/imrj05/unified-ui-template-nextjs my-app

Or with degit:

npx degit imrj05/unified-ui-template-nextjs my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:3000 to see the result.

What's included:

Next.js 16 with App Router, React 19, TypeScript
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/postcss
DSThemeProvider pre-configured in app/layout.tsx
Demo page showcasing components and theme toggle

Repo: github.com/imrj05/unified-ui-template-react

Create the project

npx degit imrj05/unified-ui-template-react my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:5173 to see the result.

What's included:

React 19 with TypeScript
Vite 7 with @vitejs/plugin-react-swc for fast HMR
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/vite plugin (no PostCSS config needed)
DSThemeProvider pre-configured in src/App.tsx
Demo page showcasing components and theme toggle

Repo: github.com/imrj05/unified-ui-template-tanstack-router

Create the project

npx degit imrj05/unified-ui-template-tanstack-router my-app
cd my-app && npm install

Start developing

npm run dev

Open http://localhost:3000 to see the result.

What's included:

React 19 with TypeScript
Vite 7 with TanStack Router — 100% type-safe, file-based routing with nested layouts
@work-rjkashyap/unified-ui — 75+ components, design tokens, theme provider, motion presets
Tailwind CSS v4 via @tailwindcss/vite plugin
DSThemeProvider pre-configured in src/routes/__root.tsx
Header with navigation, footer, and theme toggle
Demo pages showcasing components

Repo: github.com/imrj05/unified-ui-template-laravel

Create the project

npx degit imrj05/unified-ui-template-laravel my-app
cd my-app

Install dependencies

composer install
npm install
cp .env.example .env
php artisan key:generate

Start developing

npm run dev
php artisan serve

Open http://localhost:8000 to see the result.

What's included:

Laravel 12 with Blade templating
Vite with @tailwindcss/vite plugin
10 Blade anonymous components: <x-ui.button>, <x-ui.badge>, <x-ui.card>, <x-ui.input>, <x-ui.alert>, <x-ui.heading>, <x-ui.text>, and card sub-components
JS-based theme toggle with localStorage persistence
All CSS design tokens and Tailwind utilities available
Demo welcome page showcasing all components

How Templates Are Wired

Every template follows the same three-step pattern to integrate Unified UI:

1. Import styles

The CSS file is imported before Tailwind, and a @source directive tells Tailwind v4 to scan the compiled bundle for utility classes:

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

@source "../node_modules/@work-rjkashyap/unified-ui/dist";

2. Wrap with theme provider

React templates wrap the app with DSThemeProvider which mounts the CSS custom property token system and handles light/dark mode:

import { DSThemeProvider } from "@work-rjkashyap/unified-ui/theme";

export default function App({ children }) {
	return <DSThemeProvider>{children}</DSThemeProvider>;
}

3. Import and use components

// Barrel import — simple
import { Button, Badge, Card, Tabs } from "@work-rjkashyap/unified-ui";

// Layer-specific imports — better tree-shaking
import { Button } from "@work-rjkashyap/unified-ui/components";
import { fadeIn } from "@work-rjkashyap/unified-ui/motion";
import { cn } from "@work-rjkashyap/unified-ui/utils";

What Gets Modified (CLI Scaffolding)

After the framework's official scaffolding runs, the CLI overlays these files:

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` plugin
`src/index.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/main.tsx`	Replaced — wraps app with `DSThemeProvider`
`src/App.tsx`	Replaced — demo page with components + theme toggle

File	Action
`src/app/globals.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/app/layout.tsx`	Replaced — adds `ThemeProvider` + `DSThemeProvider`
`src/app/page.tsx`	Replaced — demo page with components + theme toggle

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` + TanStack Router plugins
`src/styles.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/routes/__root.tsx`	Replaced — wraps app with `DSThemeProvider`
`src/routes/index.tsx`	Replaced — demo page with components + theme toggle
`src/components/`	Created — Header, Footer, ThemeToggle components

File	Action
`vite.config.ts`	Replaced — adds `@tailwindcss/vite` plugin
`src/style.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`src/main.ts`	Replaced — clean Vue entry with CSS import
`src/lib/cn.ts`	Created — `cn()` utility (clsx + tailwind-merge)
`src/App.vue`	Replaced — demo page with component showcase
`src/components/ThemeToggle.vue`	Created — dark/light toggle component
`src/components/ui/*.vue`	Created — 10 UI components (Button, Badge, Card, Input, Alert, Heading, Text, etc.)
`src/components/ui/index.ts`	Created — barrel export for all UI components

File	Action
`vite.config.js`	Replaced — adds `@tailwindcss/vite` plugin
`resources/css/app.css`	Replaced — imports `tailwindcss` + `unified-ui/styles.css`
`resources/js/app.js`	Replaced — adds theme toggle logic
`resources/views/layouts/app.blade.php`	Created — base layout with `@vite`
`resources/views/welcome.blade.php`	Replaced — demo page with component showcase
`resources/views/components/ui/*.blade.php`	Created — 10 Blade anonymous components (button, badge, card, input, alert, heading, text, etc.)

Components Included

React Templates (Next.js, Vite + React, TanStack Router)

React starters ship with the full @work-rjkashyap/unified-ui package — all 75+ components are available immediately:

Category	Components
Form Controls	Button, Input, Input Group, Textarea, Checkbox, Radio, Switch, Select, Combobox, Slider, Date Picker, Color Picker, File Upload, Number Input, Pin Input, Search Input, Form Field, Label, Toggle, Toggle Group, Calendar
Data Display	Card, Badge, Avatar, Table, Data Table, Data Table Toolbar, Data List, Accordion, Tabs, Stat, Timeline, Steps, Code, Kbd, Carousel, Chart, Aspect Ratio, Image Gallery
Feedback	Alert, Banner, Toast / Sonner, Progress, Skeleton, Spinner, Empty State, Confirm Dialog, Markdown
Overlay	Dialog, Alert Dialog, Sheet, Drawer, Popover, Tooltip, Hover Card, Dropdown Menu, Context Menu
Navigation	Breadcrumb, Pagination, Navigation Menu, Menubar, Command, Sidebar, Scroll Area, Collapsible, Resizable, Tree View, Infinite Scroll, Virtual List, Copy Button
Layout	Separator, Video Player, Visually Hidden
Theme	Theme Toggle

Browse the full Component Reference →

Vue.js & Laravel Blade Templates

Vue and Laravel starters include 10 framework-native UI components — same design tokens, same Tailwind classes, same visual output:

Vue.js Components

<script setup>
import {
	UiButton,
	UiBadge,
	UiCard,
	UiCardHeader,
	UiCardBody,
	UiAlert,
	UiHeading,
	UiText,
} from "@/components/ui";
</script>

<template>
	<UiCard>
		<UiCardHeader>
			<UiHeading :level="2">Dashboard</UiHeading>
		</UiCardHeader>
		<UiCardBody>
			<UiAlert variant="info" title="Welcome">You're all set.</UiAlert>
			<UiButton variant="primary">Continue</UiButton>
			<UiBadge variant="success">Active</UiBadge>
		</UiCardBody>
	</UiCard>
</template>

Laravel Blade Components

<x-ui.card>
    <x-ui.card-header>
        <x-ui.heading :level="2">Dashboard</x-ui.heading>
    </x-ui.card-header>
    <x-ui.card-body>
        <x-ui.alert variant="info" title="Welcome">You're all set.</x-ui.alert>
        <x-ui.button variant="primary">Continue</x-ui.button>
        <x-ui.badge variant="success">Active</x-ui.badge>
    </x-ui.card-body>
</x-ui.card>

Component Props Reference

Component	Props
`Button`	`variant` (primary, secondary, ghost, danger), `size` (sm, md, lg), `loading`, `fullWidth`, `iconOnly`, `disabled`
`Badge`	`variant` (default, primary, secondary, success, warning, danger, info, outline), `size` (sm, md, lg), `dismissible`
`Card`	`variant` (default, outlined, elevated, interactive), `padding` (compact, comfortable), `fullWidth`
`Input`	`variant` (default, error, success), `size` (sm, md, lg), `disabled`
`Alert`	`variant` (info, success, warning, danger, default), `title`, `dismissible`
`Heading`	`level` (1–4), `color` (default, muted, primary)
`Text`	`variant` (body, bodySm, caption, label, overline, code), `color` (default, muted, primary, success, warning, danger, info)

Customising the Theme

All design tokens are exposed as CSS custom properties. Override them in your global CSS file after the Unified UI import:

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

@source "../node_modules/@work-rjkashyap/unified-ui/dist";

/* Override tokens */
:root {
	--primary: oklch(0.55 0.2 260);
	--radius-md: 0.75rem;
}

Using Tokens Directly

All CSS design tokens are also available as raw CSS custom properties and Tailwind utility classes — even if you don't use any React components.

CSS Custom Properties

.my-component {
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition-duration: var(--duration-fast);
}

Tailwind Utility Classes

<div
	class="bg-primary text-primary-foreground rounded-md shadow-sm duration-fast"
>
	Token-driven styling
</div>

Available Token Categories

Category	Tailwind Examples
Colors	`bg-primary`, `text-foreground`, `border-border`
Radius	`rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`
Shadows	`shadow-sm`, `shadow-md`, `shadow-lg`
Z-index	`z-dropdown`, `z-modal`, `z-toast`
Duration	`duration-fast`, `duration-normal`, `duration-slow`
Easing	`ease-standard`, `ease-entrance`, `ease-exit`
Fonts	`font-sans`, `font-mono`

See the full Design Tokens reference for all available tokens.

Template Repos & Contributing

All templates live inside the template/ directory of the unified-ui monorepo and are automatically mirrored to standalone read-only GitHub repos via CI.

To modify a template:

Make your changes inside template/unified-ui-<name>/ in the unified-ui monorepo.
Commit and push to main.
The CI workflow automatically syncs changes to the corresponding read-only repo within minutes.

Never commit directly to a read-only template repo — those pushes will be overwritten on the next sync.

Template	Monorepo Directory	Read-only Repo
Next.js	`template/unified-ui-nextjs/`	unified-ui-template-nextjs
React (Vite)	`template/unified-ui-vite/`	unified-ui-template-react
TanStack Router	`template/unified-ui-tanstack-router/`	unified-ui-template-tanstack-router
Laravel	`template/unified-ui-laravel/`	unified-ui-template-laravel

On this page

Starter Kits

On this page