DocsInstallation
Installation
Get started with NexoreUI in your project with customizable themes.
On This Page
Get started with NexoreUI in your project with customizable themes.
Initialize NexoreUI in your project with customizable theme tokens, or install individual components directly into your codebase with zero vendor lock-in.
Configure frameworks, live component sandbox previews, typography, density, and generate full production setups in seconds.
Select your framework, package manager, color palette, and border radius. All settings generate live commands!
Add components directly into your codebase. Fully editable TypeScript components created in @/components/ui/.
# 1. Initialize configuration pnpm dlx nexoreui init --theme indigo --radius 0.75 # 2. Add individual components pnpm dlx nexoreui add button card modal input switch badge # 3. Or add the AI & Agentic suite pnpm dlx nexoreui add thinking-indicator tool-call-card agent-status-pill command # 4. Or include all 41 components pnpm dlx nexoreui add --all
Add the generated theme tokens to your stylesheet for automatic dark/light mode support and custom radius.
@import "tailwindcss";
@source "../node_modules/nexoreui/dist/**/*.{js,mjs}";
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-border: var(--border);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--font-sans: 'Inter', sans-serif;
}
:root {
--background: hsl(0 0% 100%);
--foreground: hsl(240 10% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(240 10% 3.9%);
--primary: hsl(250 85% 50%);
--primary-foreground: hsl(0 0% 100%);
--border: hsl(240 5.9% 90%);
--radius: 0.75rem;
}
.dark {
--background: hsl(240 10% 3.9%);
--foreground: hsl(0 0% 98%);
--card: hsl(240 10% 3.9%);
--card-foreground: hsl(0 0% 98%);
--primary: hsl(250 85% 65%);
--primary-foreground: hsl(0 0% 100%);
--border: hsl(240 3.7% 15.9%);
--radius: 0.75rem;
}Ensure your project has the standard cn() helper for merging Tailwind classes cleanly.
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}