Create a theme. A few knobs, every component.

A foldkit-mixins theme is a handful of knobs; every color, space, corner and shadow is a CSS expression over them. Turn one and the components below follow, then copy the theme into your application.

Card

Invite your team

Everyone you invite can edit every page.

New

Three seats left on the Starter plan.

Input
We send the receipt here.
Button
Button
Button
Alert

A new version is out

Reload to pick up the latest fixes. Your drafts are kept.

Badge
LiveIn reviewFailedDraftArchived
Checkbox
Switch
Select
Table
Recent invoices
InvoiceStatusAmount
INV-001Paid$250.00
INV-002Pending$150.00
INV-003Paid$350.00
Item
Deploy finished
2 minutes ago
Production is live.
Avatar
AL
Ada Lovelace
GH
Grace Hopper
AT
Alan Turing
Pagination
Skeleton
Empty

No projects yet

Create one to get started.

Kbd

Search with ⌘ K

Tabs

Six people, three open milestones, one launch.

Segmented
Menu

Nothing chosen yet

Your theme

Your application’s style module. Its forSlots styles each component’s slots with a recipe, as every component page shows.

ts
import { AppStyle } from 'foldkit-mixins/app'
import { Theme } from 'foldkit-mixins/theme'

export const { t, slots, forSlots, stylesheet } = AppStyle.make({
  palette: Theme.compose(
    Theme.oklch({
      accent: { h: 264, c: 0.17, l: '52%' },
      surfaceSaturation: 0.006,
      surfaceContrast: '24%',
    }),
    Theme.define({
      knob: {
        'radius-factor': '1.4',
        density: '1',
        motion: '1',
        'shadow-strength': '100%',
      },
      font: { body: '"Geist", ui-sans-serif, system-ui, sans-serif', heading: 'inherit' },
    }),
  ),
})