Create your theme · Layout UI

Theme settings

Overrides apply on top of the selected kit.

Starting point

Layout default

Primary colour

Overrides the kit's primary. Leave blank to use the kit default.

Radius

Density

Fonts

Heading

Geist (default)

Body

Geist (default)

Shadows

Preview mode

Total revenue

$48,920

+12.5% this month

Active users

2,847

+8.2% this month

Transactions

1,204

3.1% this month

Uptime

99.9%

+0.1% this month

Account settings

Update your profile and notification preferences.

Full name

Email address

Role

Trial ending soon

Your free trial expires in 3 days. Upgrade to keep access.

DefaultSecondarySuccessWarningOutlineDestructive

Recent transactions

Description	Date	Amount	Status
Pro plan · monthly	1 Jul 2026	$49.00	paid
Design token export	28 Jun 2026	$9.00	paid
Seat upgrade	22 Jun 2026	$29.00	pending

Get this theme

1. Install the theme

Add the Layout UI base theme to your project.

bash

npx shadcn add https://ui.staging.layout.design/r/theme-layout.json

2. Add components

Install individual components from the registry.

bash

npx shadcn add https://ui.staging.layout.design/r/button.json

3. Apply your overrides

Add these token overrides to your global CSS, after the theme import.

css

:root {
  --layout-primary: #000000;
  --layout-primary-fg: #ffffff;
}

Download as kit

Export a complete .layout/ bundle you can drop into any project.

Drop the .layout folder into your repo, or import it as a kit in Layout Studio.

See the full theming guide for dark mode, density, and multi-brand usage.

Loading theme builder…

Description

Date

Amount

Status

Pro plan · monthly

1 Jul 2026

$49.00

paid

Design token export

28 Jun 2026

$9.00

paid

Seat upgrade

22 Jun 2026

$29.00

pending