Skip to content
bejamas/ui
Docs
Components
Themes
Search
Ctrl
K
Cancel
GitHub
Select theme
Presets
Default
Rome
Berlin
Custom Themes
Theme Editor
⌘E
Default
Built-in
Default
Rome
Berlin
Light
Dark
Primary
Background
L
0.5
C
0.2
H
250
Foreground
L
0.5
C
0.2
H
250
Primary
L
0.5
C
0.2
H
250
Primary FG
L
0.5
C
0.2
H
250
Secondary & Accent
Secondary
L
0.5
C
0.2
H
250
Secondary FG
L
0.5
C
0.2
H
250
Accent
L
0.5
C
0.2
H
250
Accent FG
L
0.5
C
0.2
H
250
UI Components
Card
L
0.5
C
0.2
H
250
Card FG
L
0.5
C
0.2
H
250
Popover
L
0.5
C
0.2
H
250
Popover FG
L
0.5
C
0.2
H
250
Muted
L
0.5
C
0.2
H
250
Muted FG
L
0.5
C
0.2
H
250
Utility & Form
Border
L
0.5
C
0.2
H
250
Input
L
0.5
C
0.2
H
250
Ring
L
0.5
C
0.2
H
250
Status
Destructive
L
0.5
C
0.2
H
250
Destructive FG
L
0.5
C
0.2
H
250
Charts
Chart 1
L
0.5
C
0.2
H
250
Chart 2
L
0.5
C
0.2
H
250
Chart 3
L
0.5
C
0.2
H
250
Chart 4
L
0.5
C
0.2
H
250
Chart 5
L
0.5
C
0.2
H
250
Themes
Toggle
Hidden content here
Toggle
Hidden content here
Theme Presets
Select theme
Presets
Default
Rome
Berlin
Custom Themes
Primary Theme Colors
Background
var(--background)
Foreground
var(--foreground)
Primary
var(--primary)
Primary Foreground
var(--primary-foreground)
Secondary & Accent Colors
Secondary
var(--secondary)
Secondary Foreground
var(--secondary-foreground)
Accent
var(--accent)
Accent Foreground
var(--accent-foreground)
UI Component Colors
Card
var(--card)
Card Foreground
var(--card-foreground)
Popover
var(--popover)
Popover Foreground
var(--popover-foreground)
Muted
var(--muted)
Muted Foreground
var(--muted-foreground)
Utility & Form Colors
Border
var(--border)
Input
var(--input)
Ring
var(--ring)
Status & Feedback Colors
Destructive
var(--destructive)
Destructive Foreground
Chart & Visualization Colors
Chart 1
var(--chart-1)
Chart 2
var(--chart-2)
Chart 3
var(--chart-3)
Chart 4
var(--chart-4)
Chart 5
var(--chart-5)