Skip to content

Brand Components

Component directory

Search components…

Foundations

Colour Type Spacing and sizes Radius Shadow and borders Motion Icons Focus

Components

Buttons Badges Inputs and text areas Search field Select Switch, checkbox, radio Segmented control and tabs Filter chips Avatars Progress, skeletons and spinners Notices Empty states Cards List rows Page and section headers Key–value Breadcrumbs and back Table Key hints and the wordmark

Overlays

Menus and submenus Context menu Popover, tooltip and an open select Dialog and confirm Drawers Toasts and loading → done

WAPER / UI

Focus

Keyboard focus is a 2px --focus outline, offset 1. Inputs only darken their edge one step, no ring. Press Tab to try.

Preview

Light

Loading preview…

Dark

Loading preview…

Character, with consistency.

Explore Waper ↗

Buttons and switches (mock)

Inputs (mock)

Rows (mock)

Weekly brief

Try it: click here, then press Tab

Mouse clicks don’t show the outline on buttons; text inputs darken their edge one step either way, with no ring.

Buttons and switches (mock)

Inputs (mock)

Rows (mock)

Weekly brief

Try it: click here, then press Tab

Mouse clicks don’t show the outline on buttons; text inputs darken their edge one step either way, with no ring.