Theming

Customize VeloxUI's look and feel by overriding CSS custom properties. Pick a preset, tweak colors, and copy the generated CSS.

Theme Customizer

Presets

Radius

Live Preview

Create Project

Deploy your new project in one-click.

Framework

Buttons

Notifications

Info

Deployment started.

Success

Changes saved.

Warning

Disk almost full.

Controls

Dark mode

Notifications

Accept terms

Subscribe to newsletter

Radio & Rating

DefaultComfortableCompact

Rating

Tags & Badges

DefaultSuccessWarningDanger

⁵

⁹⁹

Data Table

Recent deployments.

Project	velox-api
Status	Live
Branch	main
Duration	2m 34s

Progress

Storage45%

Memory72%

CPU89%

Build100%

Bg

Primary

Secondary

Destructive

Muted

Accent

Border

Ring

Colors

Base

--background

--foreground

Primary

--primary

--primary-foreground

--primary-hover

Secondary

--secondary

--secondary-foreground

--secondary-hover

Destructive

--destructive

--destructive-foreground

--destructive-hover

Muted & Accent

--muted

--muted-foreground

--accent

--accent-foreground

Border & Input

--border

--input

--ring

Sidebar

--sidebar-bg

--sidebar-fg

--sidebar-border

--sidebar-muted

--sidebar-muted-fg

--sidebar-accent

--sidebar-accent-fg

--sidebar-item-fg

--sidebar-item-hover-fg

--sidebar-item-hover-bg

--sidebar-item-active-bg

--sidebar-item-active-fg

Generated CSS

:root {
  --radius: 0.625rem;
}

Usage

Override CSS variables in your app's global stylesheet:

:root {
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --primary-hover: #4f46e5;
  --ring: #6366f1;
  --radius: 0.75rem;
}

Or scope to a container:

.my-section {
  --primary: #10b981;
  --primary-foreground: #ffffff;
  --primary-hover: #059669;
}

All Variables Reference

Variable	Default (Light)	Default (Dark)	Description
--background	#ffffff	#09090b	Page background
--foreground	#09090b	#fafafa	Default text color
--primary	#18181b	#fafafa	Primary actions
--primary-foreground	#fafafa	#18181b	Text on primary
--primary-hover	#27272a	#e4e4e7	Primary hover
--secondary	#f4f4f5	#27272a	Secondary actions
--secondary-foreground	#18181b	#fafafa	Text on secondary
--secondary-hover	#e4e4e7	#3f3f46	Secondary hover
--destructive	#ef4444	#dc2626	Danger / delete
--destructive-foreground	#fafafa	#fafafa	Text on destructive
--destructive-hover	#dc2626	#ef4444	Destructive hover
--muted	#f4f4f5	#27272a	Subtle backgrounds
--muted-foreground	#71717a	#a1a1aa	Secondary text
--accent	#f4f4f5	#27272a	Hover backgrounds
--accent-foreground	#18181b	#fafafa	Text on accent
--border	#e4e4e7	rgba(255 255 255 / 0.1)	Border color
--input	#e4e4e7	rgba(255 255 255 / 0.15)	Input border
--ring	#18181b	#d4d4d8	Focus ring
--radius	0.625rem	0.625rem	Border radius
--sidebar-bg	#ffffff	#09090b	Sidebar background
--sidebar-fg	#09090b	#fafafa	Sidebar text
--sidebar-border	#e4e4e7	rgba(255 255 255 / 0.1)	Sidebar border
--sidebar-muted	#f4f4f5	#27272a	Sidebar muted bg
--sidebar-muted-fg	#71717a	#a1a1aa	Sidebar muted text
--sidebar-accent	#f4f4f5	#27272a	Sidebar hover bg
--sidebar-accent-fg	#18181b	#fafafa	Sidebar hover text
--sidebar-item-fg	#71717a	#a1a1aa	Item text color
--sidebar-item-hover-fg	#09090b	#fafafa	Item hover text
--sidebar-item-hover-bg	#f4f4f5	#27272a	Item hover background
--sidebar-item-active-bg	var(--primary)	var(--primary)	Item active background
--sidebar-item-active-fg	var(--primary-fg)	var(--primary-fg)	Item active text
--shadow-xs	0 1px 2px ...	—	Extra small shadow
--shadow-sm	0 1px 3px ...	—	Small shadow

Dark Mode

Add the dark class to your <html> or root element:

<html class="dark">

.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --primary-hover: #e4e4e7;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --secondary-hover: #3f3f46;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --destructive-hover: #ef4444;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --border: rgba(255 255 255 / 0.1);
  --input: rgba(255 255 255 / 0.15);
  --ring: #d4d4d8;
}