Theme builder

Import a theme

Paste a tweakcn export, or any CSS with :root and .dark blocks.

Revenue

+12%

$12,480

Sessions

+4%

8,214

Errors

-8%

37

Uptime

stable

99.9%

Heads up

Every component here reads the tokens in the sidebar.

Buttons and navigation

default secondary destructive ⌘K
AL GB +3
Hover me

Activity

Form

Disclosure and overlays

What is a token?
A CSS custom property.
Where do they live?
In :root and .dark.

Are you sure?

This cannot be undone.

Drawer

A bottom sheet.

Edit profile

Tokens apply inside overlays too.

Muted surface

Secondary text and borders.

Skeleton

Loading placeholders.

theme.css