NexoreUIv1.8.6
InstallationComponents61IconsTemplatesNEWNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
61 comps
Create Project
Studio
Installation
Components Overview
60+
Icons
300+
Categories6 groups
Button
Input
Checkbox
AI
Select
AI
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Aurora Border Card
AI
Aurora Search Pill
AI
AI Prompt Input
AI
Command
Interactive Code Block
AI
Pro AI
AI
Theme: cyan
Studio
DocsInstallation

Installation

Get started with NexoreUI in your project with customizable themes.

NextComponents Overview
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub
Interactive Quick Start

Installation & Setup Guide

Initialize NexoreUI in your project with customizable theme tokens, or install individual components directly into your codebase with zero vendor lock-in.

Tailwind CSS v4 Ready
•
100% TypeScript
•
Live Tokens Customization
NexoreUI Project & Theme StudioNew

Configure frameworks, live component sandbox previews, typography, density, and generate full production setups in seconds.

Open Studio

1Interactive Project Configurator

Select your framework, package manager, color palette, and border radius. All settings generate live commands!

Live Component Sandbox (Cyan)
#06b6d4radius: 0.75rem
Primary Button
Outline Button
Segmented Tabs
Input with Focus Ring
Slider Controller68%
Status & Toggle Switch
Active Theme
Monthly Growth
+34.8%
Theme tokens synchronized with Tailwind CSS v4 variables
Solid BadgeOutlineSoft Tag
Generated Initialization Commandcyan • 0.75rem
pnpm dlx nexoreui init --theme cyan --radius 0.75

2Add Components via CLI

Add components directly into your codebase. Fully editable TypeScript components created in @/components/ui/.

Terminal
1# 1. Initialize configuration
2pnpm dlx nexoreui init --theme cyan --radius 0.75
3
4# 2. Add individual components
5pnpm dlx nexoreui add button card modal input switch badge
6
7# 3. Or add the AI & Agentic suite
8pnpm dlx nexoreui add aurora-border-card ai-prompt-input command
9
10# 4. Or include all 40 components
11pnpm dlx nexoreui add --all

3Configure globals.css (Tailwind CSS v4)

Add the generated theme tokens to your stylesheet for automatic dark/light mode support and custom radius.

app/globals.css
1@import "tailwindcss";
2@source "../node_modules/nexoreui/dist/**/*.{js,mjs}";
3
4@theme {
5 --color-background: var(--background);
6 --color-foreground: var(--foreground);
7 --color-card: var(--card);
8 --color-card-foreground: var(--card-foreground);
9 --color-popover: var(--popover);
10 --color-popover-foreground: var(--popover-foreground);
11 --color-primary: var(--primary);
12 --color-primary-foreground: var(--primary-foreground);
13 --color-secondary: var(--secondary);
14 --color-secondary-foreground: var(--secondary-foreground);
15 --color-muted: var(--muted);
16 --color-muted-foreground: var(--muted-foreground);
17 --color-accent: var(--accent);
18 --color-accent-foreground: var(--accent-foreground);
19 --color-destructive: var(--destructive);
20 --color-destructive-foreground: var(--destructive-foreground);
21 --color-border: var(--border);
22 --color-input: var(--input);
23 --color-ring: var(--ring);
24 --radius-lg: var(--radius);
25 --radius-md: calc(var(--radius) - 2px);
26 --radius-sm: calc(var(--radius) - 4px);
27 --font-sans: 'Inter', sans-serif;
28}
29
30:root {
31 --background: hsl(0 0% 100%);
32 --foreground: hsl(240 10% 3.9%);
33 --card: hsl(0 0% 100%);
34 --card-foreground: hsl(240 10% 3.9%);
35 --popover: hsl(0 0% 100%);
36 --popover-foreground: hsl(240 10% 3.9%);
37 --primary: hsl(190.4 95% 39%);
38 --primary-foreground: hsl(0 0% 100%);
39 --secondary: hsl(240 4.8% 95.9%);
40 --secondary-foreground: hsl(240 5.9% 10%);
41 --muted: hsl(240 4.8% 95.9%);
42 --muted-foreground: hsl(240 3.8% 46.1%);
43 --accent: hsl(240 4.8% 95.9%);
44 --accent-foreground: hsl(240 5.9% 10%);
45 --destructive: hsl(0 84.2% 60.2%);
46 --destructive-foreground: hsl(0 0% 98%);
47 --border: hsl(240 5.9% 90%);
48 --input: hsl(240 5.9% 90%);
49 --ring: hsl(190.4 95% 39%);
50 --radius: 0.75rem;
51 --glow-radius: 12px;
52 --glow-strength: 0.15;
53 --glow-color: 6 182 212;
54}
55
56.dark {
57 --background: hsl(240 10% 3.9%);
58 --foreground: hsl(0 0% 98%);
59 --card: hsl(240 10% 3.9%);
60 --card-foreground: hsl(0 0% 98%);
61 --popover: hsl(240 10% 3.9%);
62 --popover-foreground: hsl(0 0% 98%);
63 --primary: hsl(188.7 94.5% 42.7%);
64 --primary-foreground: hsl(0 0% 100%);
65 --secondary: hsl(240 3.7% 15.9%);
66 --secondary-foreground: hsl(0 0% 98%);
67 --muted: hsl(240 3.7% 15.9%);
68 --muted-foreground: hsl(240 5% 64.9%);
69 --accent: hsl(240 3.7% 15.9%);
70 --accent-foreground: hsl(0 0% 98%);
71 --destructive: hsl(0 62.8% 30.6%);
72 --destructive-foreground: hsl(0 0% 98%);
73 --border: hsl(240 3.7% 15.9%);
74 --input: hsl(240 3.7% 15.9%);
75 --ring: hsl(188.7 94.5% 42.7%);
76 --radius: 0.75rem;
77 --glow-radius: 20px;
78 --glow-strength: 0.35;
79 --glow-color: 6 182 212;
80}

4Configure Utility Helper (lib/utils.ts)

Ensure your project has the standard cn() helper for merging Tailwind classes cleanly.

src/lib/utils.ts
1import { clsx, type ClassValue } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4export function cn(...inputs: ClassValue[]) {
5 return twMerge(clsx(inputs));
6}