Theming playground

Change the shared --gbs-* variables and watch every component follow. Nothing is saved: copy the CSS when you like what you see, and paste it into your own :root.

Read the theming guide

Theme options

Presets

Color scheme

Colors you set are stored as a light-dark() pair, so each scheme keeps its own value.

Surfaces and text

--gbs-bg

--gbs-fg

--gbs-muted

--gbs-subtle

--gbs-hover

--gbs-input-bg

--gbs-readonly-bg

--gbs-header-bg

--gbs-header-fg

Borders and shape

--gbs-border

--gbs-border-subtle

--gbs-border-control

--gbs-radius8px

--gbs-font-size13px

--gbs-shadow

--gbs-backdrop

Accent and status

--gbs-accent

--gbs-accent-fg

--gbs-accent-soft

--gbs-accent-strong

--gbs-focus

--gbs-danger

--gbs-danger-fg

--gbs-success

--gbs-warning

--gbs-info

Grid rows

--gbs-row-alt

--gbs-row-hover

--gbs-row-selected

--gbs-row-selected-hover

--gbs-cell-px12px

--gbs-pin-shadow

Presets

Color scheme

Colors you set are stored as a light-dark() pair, so each scheme keeps its own value.

Surfaces and text

--gbs-bg

--gbs-fg

--gbs-muted

--gbs-subtle

--gbs-hover

--gbs-input-bg

--gbs-readonly-bg

--gbs-header-bg

--gbs-header-fg

Borders and shape

--gbs-border

--gbs-border-subtle

--gbs-border-control

--gbs-radius8px

--gbs-font-size13px

--gbs-shadow

--gbs-backdrop

Accent and status

--gbs-accent

--gbs-accent-fg

--gbs-accent-soft

--gbs-accent-strong

--gbs-focus

--gbs-danger

--gbs-danger-fg

--gbs-success

--gbs-warning

--gbs-info

Grid rows

--gbs-row-alt

--gbs-row-hover

--gbs-row-selected

--gbs-row-selected-hover

--gbs-cell-px12px

--gbs-pin-shadow

Your CSS

:root {
  /* Nothing changed yet — the defaults are in use. */
}

Button

Docs

Input

Docs

OtpInput

Docs

NumberInput

Docs

Textarea

Docs

Checkbox

Docs

CheckboxGroup

Docs

RadioGroup

Docs

Switch

Docs

Select

Docs

MultiSelect

Docs

DatePicker

Docs

DateRangePicker

Docs

FileUploader

Docs

Tabs

Docs

Card

Docs

Dialog

Docs

Toaster

Docs

Spinner

Docs

Skeleton

Docs

Data Grid

Docs

Theming playground

Button

Input

OtpInput

NumberInput

Textarea

Checkbox

CheckboxGroup

RadioGroup

Switch

Select

MultiSelect

DatePicker

DateRangePicker

FileUploader

Tabs

Card

Menu

Popover

Tooltip

Dialog

Toaster

Spinner

Skeleton

Data Grid