Skip to main content

​
What are Presets?

Presets are pre-configured theme objects that provide a complete design system out of the box. They include colors, typography, spacing, and styles for common elements, allowing you to quickly start building with Theme UI without having to define every design token yourself. Each preset can be used as-is or customized to match your design requirements. They serve as excellent starting points or references for creating your own themes.

​
Available Presets

Theme UI includes several built-in presets, each with its own design aesthetic:

Base

A minimal, foundational preset with sensible defaults

System

Uses system fonts and includes dark mode support

Funk

A colorful preset with Poppins font

Future

Modern and forward-looking design

Roboto

Clean design using Roboto font family

Dark

Dark theme with vibrant accent colors

Deep

Deep purple dark theme

Swiss

Swiss design inspired, clean and minimal

Tosh

Macintosh-inspired retro design

Bootstrap

Familiar Bootstrap design system

Bulma

Based on the Bulma CSS framework (WIP)

Tailwind

Complete Tailwind CSS design tokens

Sketchy

Hand-drawn, sketchy appearance

Polaris

Shopify Polaris design system

​
How Presets Work

Presets are simply JavaScript objects that conform to the Theme UI theme specification. They export a theme object with properties like:
  • colors - Color palette and semantic color tokens
  • fonts - Font family declarations
  • fontSizes - Typographic scale
  • fontWeights - Font weight values
  • lineHeights - Line height values
  • space - Spacing scale for margins and padding
  • sizes - Width and height values
  • radii - Border radius values
  • shadows - Box shadow definitions
  • styles - Styles for HTML elements and MDX components

​
Installation

Presets are available in the @theme-ui/presets package: 
npm install @theme-ui/presets
Or install individual preset packages: 
npm install @theme-ui/preset-funk

​
Viewing Presets

You can view live examples of all presets in the Theme UI Demo.

​
Preset Details

​
Base

The base preset provides a minimal, foundational theme with sensible defaults: 
import { base } from '@theme-ui/presets'

const theme = {
  ...base,
}
Key features:
  • System font stack
  • Simple color palette (black text, white background, blue primary)
  • Standard spacing scale (4px base unit)
  • Clean, minimal styles

​
System

The system preset uses system fonts and includes multiple color modes: 
import { system } from '@theme-ui/presets'

const theme = {
  ...system,
}
Key features:
  • System font stack for optimal performance
  • Built-in color modes: light, dark, deep, and swiss
  • CSS custom properties enabled
  • initialColorMode: 'system' respects user preferences

​
Funk

A vibrant preset that extends the base with Poppins font and purple accents: 
import { funk } from '@theme-ui/presets'

const theme = {
  ...funk,
}
Key features:
  • Poppins font family
  • Purple color scheme (#609 primary)
  • Bold headings (font-weight: 900)
  • Relaxed line height (1.625)

​
Dark

A dark theme with vibrant cyan and magenta accents: 
import { dark } from '@theme-ui/presets'

const theme = {
  ...dark,
}
Key features:
  • Near-black background (#060606)
  • White text on dark background
  • Cyan primary color (#3cf)
  • Magenta secondary color (#e0f)
  • Includes Prism syntax highlighting styles

​
Deep

A deep purple dark theme with HSL colors: 
import { deep } from '@theme-ui/presets'

const theme = {
  ...deep,
}
Key features:
  • Deep blue-purple background (hsl(230, 25%, 18%))
  • Light purple accents
  • All colors defined using HSL
  • Includes Prism syntax highlighting

​
Swiss

Swiss design inspired with warm, muted colors: 
import { swiss } from '@theme-ui/presets'

const theme = {
  ...swiss,
}
Key features:
  • Warm red-orange primary color
  • Muted background tones
  • Clean, minimal aesthetic
  • HSL color values

​
Tailwind

A comprehensive preset with the complete Tailwind CSS design system: 
import { tailwind } from '@theme-ui/presets'

const theme = {
  ...tailwind,
}
Key features:
  • Complete Tailwind color palette (slate, gray, zinc, etc.)
  • Tailwind spacing scale
  • Multiple button and input variants
  • Extensive design tokens
  • Transform and transition utilities

​
Bootstrap

Familiar Bootstrap design system adapted for Theme UI: 
import { bootstrap } from '@theme-ui/presets'

const theme = {
  ...bootstrap,
}
Key features:
  • Bootstrap color palette
  • Bootstrap spacing scale (based on 1rem)
  • Bootstrap breakpoints (576px, 768px, 992px, 1200px)
  • Familiar component styles

​
Contributing New Presets

We welcome contributions of new presets! If you’d like to add a preset or improve existing ones, please open an issue or pull request.

​
Next Steps

Using Presets

Learn how to install and customize presets

Theme Specification

Understand the Theme UI theme specification

Build docs developers (and LLMs) love

Get started for freeTalk to us