Alpha 0.1 Preview: Milkshake UI!! is an early work in progress. APIs, tokens, and themes may change without notice. Please don’t use this build in production yet.
✨ Secondary accent unlocked

Milkshake UI - Test

A pure CSS utility framework built with vanilla-extract and sprinkles. Framework-agnostic, zero runtime, and fully responsive.

Sip the Docs

🎨 Dynamic Theming System

Switch between light and dark themes to see how all components adapt automatically. The theming system uses CSS custom properties for seamless theme switching.

Theme-Aware Components

This card automatically adapts to the current theme using semantic color tokens.

Primary Accent Success Warning

Interactive States

Typography Scale

Extra Small Text
Small Text
Base Text
Large Text

Current Theme: ⚡ Zigrok Quantum

Active Font Mode: Sans (Inter)

Buttons & Groups

Every tone and surface combination in one spot for quick interaction testing.

Solid Buttons

High-emphasis actions with the new raised surface treatment.

Soft Buttons

Low-elevation fills for calm secondary actions.

Outline Buttons

Border-focused buttons that sit well on tinted surfaces.

Ghost Buttons

Transparent surfaces for quiet, low-priority actions.

Link Buttons

Typographic link buttons for inline calls to action.

Size Scale

Compare the padding rhythm for each size token.

Tight toolbars, compact dialogs.
Default size for forms and flows.
High-impact hero or marketing CTAs.

Launch Flow

Primary call-to-action with complementary preview and live demo links.

Segmented Control

Justified trio that flexes to full width for navigation patterns.

Command Palette

Vertical stack suited for menus or mobile drawers.

Color Palette

Comprehensive color system with vanilla-inspired primary colors and semantic palettes.

Primary Colors

50
100
200
300
400
500
600
700
800
900

Secondary Colors

50
100
200
300
400
500
600
700
800
900

Neutral Colors

50
100
200
300
400
500
600
700
800
900

Semantic Colors

Success
Error
Warning
Info

Typography

Comprehensive typography system with multiple font families and sizes.

Font Sizes

The quick brown fox jumps over the lazy dog (xs)
The quick brown fox jumps over the lazy dog (sm)
The quick brown fox jumps over the lazy dog (base)
The quick brown fox jumps over the lazy dog (lg)
The quick brown fox jumps over the lazy dog (xl)
The quick brown fox jumps over the lazy dog (2xl)
The quick brown fox jumps over the lazy dog (3xl)
The quick brown fox jumps over the lazy dog (4xl)
The quick brown fox jumps over the lazy dog (5xl)
The quick brown fox jumps over the lazy dog (6xl)

Font Weights

The quick brown fox jumps over the lazy dog (thin)
The quick brown fox jumps over the lazy dog (light)
The quick brown fox jumps over the lazy dog (normal)
The quick brown fox jumps over the lazy dog (medium)
The quick brown fox jumps over the lazy dog (semibold)
The quick brown fox jumps over the lazy dog (bold)
The quick brown fox jumps over the lazy dog (extrabold)
The quick brown fox jumps over the lazy dog (black)

Spacing

Consistent spacing scale for margins, padding, and layout.

1

2

3

4

6

8

12

16

24

32

Framework Utilities

Core utility classes for colors, spacing, borders, shadows, and layout.

Box Shadows

boxShadow: 'sm'
boxShadow: 'md'
boxShadow: 'lg'
boxShadow: 'xl'

Border Utilities

borderWidth: 'thin', borderColor: 'neutral-400'
borderWidth: 'medium', borderColor: 'neutral-500'
borderWidth: 'thick', borderColor: 'primary-500'
borderWidth: 'heavy', borderColor: 'error-500'
borderStyle: 'dashed'
borderStyle: 'dotted'
borderStyle: 'double'

Layout & Spacing

padding: 4
paddingX: 6, paddingY: 3
margin: 4
marginX: 6, marginY: 3

Border Radius

sm • md • lg • xl • full

Display & Position

F1 F2 F3
G1 G2 G3 G4
Relative ABS
flex • grid • relative

Transitions

fastest • fast • normal • slow (hover to see transitions)

Aspect Ratio & Object Fit

square
video
portrait

Scroll Snap & Overscroll

Snap 1Snap 2Snap 3Snap 4Snap 5Snap 6Snap 7Snap 8

Grid System

Feature-complete CSS Grid utilities: templates, auto-flow, tracks, placement, and line spans.

Templates: Auto-fit

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Templates: Auto-fill

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Templates: Repeat Columns

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8

Grid Lines & Spans

span 2
span 3
auto
2 ➝ 5

Auto Flow & Tracks

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6
Tile 7
Tile 8
gridAutoFlow: 'row dense' • gridAutoRows: 'minmaxFr'

Place Items

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
placeItems: 'center'

Place Content

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
placeContent: 'center'

Typography: Font Families

Choose from sans, serif, and mono families.

Sans: The quick brown fox jumps over the lazy dog.
Serif: The quick brown fox jumps over the lazy dog.
Mono: const hello = 'world';

Transitions: Properties & Easing

Transition properties (colors, transform, shadow) and timing functions.

Timing Functions

linear
ease
ease-in
ease-out
ease-in-out

Transition Properties

colors
transform
shadow
Hover the chips

Responsive System

Orientation helpers, container-query tokens, and a CQ-powered switcher.

Orientation Helpers

Currently in portrait orientation.

Currently in landscape orientation.

Container Query Switcher

Pane A
Pane B
Pane C

Stacks vertically when its container is ≤ 48rem wide.

Stack & Cluster

Stack item 1
Stack item 2
Stack item 3
Chip AChip BChip CChip DChip E
Stack = vertical rhythm; Cluster = wrapped row of chips with gap.

CQ Sidebar

Main

When wide: two columns. When ≤ 64rem: stack.

Container Query Tokens

Named rem-based breakpoints for container queries:
  • sm: 40rem
  • md: 48rem
  • lg: 64rem
  • xl: 80rem
  • 2xl: 96rem
cqMin.md → (min-width: 48rem)
cqMax.md → (max-width: 48rem)
Full‑bleed band using containerFluid

Milkshake UI - A pure CSS utility framework built with vanilla-extract and sprinkles.