Skip to content

bejamas/ui

Docs
Components
Themes

Presets

Default

Rome

Berlin

Custom Themes

Theme Editor

⌘E

Built-in

Default

Rome

Berlin

Border Radius

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. Make sure to 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.

Colors:

HSL

RGB

HEX

OKLCH

AI Generate Palette

Describe the palette you want to create. You can mention brands, moods, colors, or upload reference images.

Reference Images (optional)

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...

Share URL

This link will expire after 30 days of inactivity.

Failed to create share link. Please try again.

Getting Started
Components
Concepts

Presets

Default

Rome

Berlin

Custom Themes

Theme Editor

⌘E

Built-in

Default

Rome

Berlin

Border Radius

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. Make sure to 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.

Colors:

HSL

RGB

HEX

OKLCH

AI Generate Palette

Describe the palette you want to create. You can mention brands, moods, colors, or upload reference images.

Reference Images (optional)

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...

Share URL

This link will expire after 30 days of inactivity.

Failed to create share link. Please try again.

Components

All the components available in the library.

Hidden content here

Accordion
Alert
Avatar
Badge
Breadcrumb
Button
Button Group
Card
Carousel
Checkbox
Collapsible
Combobox
Date
Dialog
Dropdown Menu
Field
Hover Card
Input
Input Group
Item
Kbd
Label
Link Group
Marquee
Native Select
Navigation Menu
Popover
Radio Group
Select
Separator
Skeleton
Slider
Spinner
Sticky Surface
Switch
Table
Tabs
Textarea
Toggle
Toggle Group
Tooltip

Built at Bejamas. The source code is available on GitHub.