Create
Tune the design system, preview it live, and copy the Astro init command or shareable preset code.
Presets
Juno - Inter
Vega - Playfair Display
Lyra - Geist Mono
Theme Editor
⌘E
Built-in
None
Small
Medium
Default
Large
Extra Large
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
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
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
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
Destructive
L 0.5
C 0.2
H 250
Destructive FG
L 0.5
C 0.2
H 250
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
Reset
Import CSS
Export Theme
Share Theme
Import Custom CSS
Paste your CSS file below to customize the theme colors. You can import
themes from tweakcn.com or include variables like --primary,
--background, etc.
Export
Copy the theme configuration in your preferred format.
bunx shadcn@latest add
https://ui.bejamas.com/r/themes/theme.json Requires the theme to be shared first.
HSL
RGB
HEX
OKLCH
AI Generate Palette
Describe the palette you want to create. You can mention brands, moods,
colors, or upload reference images.
Drop images or click to upload
Max 3 images, PNG/JPG
Generating palette...
AI Reasoning
Share Theme
Share this theme with others via a link. Anyone with the link can
preview and install your theme.
Generating share link...
This link will expire after 30 days of inactivity.
Failed to create share link. Please try again.