Get started

Make it your own.

Choose from one of our themes or build your own.

Accent color

Base color

Live preview

Components below use the generated --slate-* tokens.

Button

Primary actions track your accent

Select your payment method

Radio group

Exclusive choices with field labels

Role

Can perform any action.

Read, create, and update.

Read only.

Account activity

Products and features

Sign-in and alerts

Checkbox group

Related preferences

Auto-save drafts
Deploy notifications
Marketing digests

Switch group

Settings that feel native

Form fields

Input and select with field chrome

A

Acme Inc.

Workspace

Sidebar

Default Secondary Outline Alert
Learn more about theming
Account settings preview — tokens drive muted text and borders here too.
Billing chrome inherits the same primary and surface tokens.

Theming your Slate project

Slate uses CSS variables for theming. Paste the generated block into resources/css/app.css after importing Slate.

  1. 1Add the CSS variables

  2. 2Read the tokens docs

    After your theme is in place, use semantic utilities (bg-primary, text-muted-foreground) in your Blade views.

    Design tokens docs