Universal Design System

Installation

Add Universal Design System components to your project using the CLI or copy-paste installation.

Prerequisites

Minimum requirements:

  • Node.js 18+
  • React 18+
  • Next.js 13.4+ (if using Next.js)
  • Tailwind CSS configured

Quick start

Install any component with a single command. Dependencies are resolved automatically.

npx shadcn@latest add http://localhost:3000/r/ui/button/default/registry.json

Install individual components

Add the components you need, one at a time:

# Triggers actions and events
npx shadcn@latest add http://localhost:3000/r/ui/button/default/registry.json
# Groups related content and actions
npx shadcn@latest add http://localhost:3000/r/ui/card/default/registry.json
# Single-line text input
npx shadcn@latest add http://localhost:3000/r/ui/text-field/default/registry.json
# Modal window
npx shadcn@latest add http://localhost:3000/r/ui/dialog/default/registry.json

Component variants

Each component supports multiple UI library foundations. Choose per component based on your needs:

  • default — Pure HTML & CSS, minimal dependencies
  • radix-ui — Radix UI primitives with built-in accessibility
  • base-ui — MUI Base UI, React 19 compatible
  • headless-ui — Tailwind Labs Headless UI

Installing a specific variant

Replace default with your preferred variant:

npx shadcn@latest add http://localhost:3000/r/ui/button/radix-ui/registry.json
npx shadcn@latest add http://localhost:3000/r/ui/accordion/base-ui/registry.json
npx shadcn@latest add http://localhost:3000/r/ui/popover/headless-ui/registry.json

Manual installation

If you prefer not to use the CLI, copy components directly into your project.

1. Install dependencies

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge

2. Add utility functions

Create lib/utils.ts:

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Copy component code

Browse our component gallery and copy the source code for the components you need.