Overview
Get Started
Installation
A new, modern UI component library built on top of Base UI. Built for developers and AI.
Install dependencies
pnpm add @base-ui/react clsx class-variance-authority tailwind-merge @tabler/icons-react
Configure path aliases
Configure the path aliases in your tsconfig.json file.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}The @ alias is a preference. You can use other aliases if you want.
Configure styles
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-sans: var(--font-sans);
--font-heading: var(--font-heading);
--font-mono: var(--font-mono);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--radius-sm: calc(var(--radius) - 0.125rem);
--radius-md: var(--radius);
--radius-lg: calc(var(--radius) + 0.125rem);
--radius-xl: calc(var(--radius) + 4px);
/* Opacity */
--opacity-hover: var(--opacity-hover);
--opacity-disabled: 0.5;
/* Info */
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
/* Success */
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
/* Warning */
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
/* Danger */
--color-danger: var(--danger);
--color-danger-foreground: var(--danger-foreground);
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
/* Info */
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-700);
/* Success */
--success: oklch(0.73 0.1935 150.81);
--success-foreground: oklch(1 0 0);
/* Warning */
--warning: oklch(0.78 0.1585 72.33);
--warning-foreground: oklch(1 0 0);
/* Danger */
--danger: oklch(0.68 0.2126 24.89);
--danger-foreground: oklch(1 0 0);
/* Font */
--font-geist-sans: "Geist", sans-serif;
--font-geist-mono: "Geist Mono", monospace;
/* Opacity */
--opacity-hover: 0.8;
/* Radius */
--radius: 0.5rem;
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
/* Info */
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-400);
/* Success */
--success: oklch(0.73 0.1935 150.81);
--success-foreground: oklch(1 0 0);
/* Warning */
--warning: oklch(0.78 0.1585 72.33);
--warning-foreground: oklch(1 0 0);
/* Danger */
--danger: oklch(0.68 0.2126 24.89);
--danger-foreground: oklch(1 0 0);
/* Opacity */
--opacity-hover: 0.9;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}Add a cn helper
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Base UI setup
Portals
Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root:
<body>
<div className="isolate">{children}</div>
</body>iOS 26+ Safari
Starting with iOS 26, Safari allows content beneath the UI chrome to be visible. Backdrops such as those used by dialogs must use position: absolute instead of position: fixed to cover the entire visual viewport. For this to work after the page is scrolled, the following style must be added to your global styles:
<body className="relative">
<div className="isolate">{children}</div>
</body>