P
Pulse
Product analyticsA metrics dashboard for tracking product health across teams, so nobody starts the day guessing what changed.
UI LIBRARY
Every interface pattern, live
Tables, calendars, dashboards, admin tools, AI interfaces and everything else a product needs. Every demo below is a real, working component you can click, type into and drag, not a screenshot.
SHOWCASE
Twelve products, one design system
Full, working product screens built from the components below. Switch views, drag a card, open a drawer: every scene is real, not a picture of one.
R
Ridge
Project managementA project workspace that keeps planning, execution and discussion in one place instead of three different tools.
B
Beacon
AI assistant workspaceA workspace for working with a model: it searches, shows its steps, cites what it found and lets you review every change.
C
Current
Team messagingTeam messaging that keeps a channel readable even when three conversations are happening in it at once.
S
Stride
Online storeA sneaker storefront where narrowing down a size and color never means losing your place in the catalog.
C
Circuit
Workflow automationA workflow builder where the logic is visible as a diagram, not buried three menus deep.
B
Bastion
Admin consoleAn admin console that makes it obvious who can do what, and who did what, without a support ticket.
W
Wander
Travel bookingA booking flow that keeps dates, guests and filters in view the whole way from search to confirmation.
S
Surge
Fitness trackerA habit tracker built for a thumb: log a streak, check progress, done in one hand.
T
Thrive
Personal financeA finance app that answers "can I afford this" faster than opening a spreadsheet.
A
Atlas
Media libraryA media library where finding, uploading and cropping an asset all happen without leaving the page.
P
Portal
Auth & onboardingThe first five minutes of a new account: signing in, verifying it's really you, and knowing what to do next.
The building blocks behind these screens
Every scene above is composed from the patterns below. Filter by name, or follow a "Patterns used" chip back to the exact demo it came from.
No patterns match that search. Try a different word, or clear the search to see everything.
01 Foundations
Color tokens, type scale, spacing, radius, elevation, iconography and motion, plus the theme switch driving every demo on this page.
Color tokens
The core palette every component below draws from. Click a swatch to copy its variable.
Type scale
Eight steps, from a caption to a hero line.
Spacing scale
An 8-point-ish rhythm used for every gap and padding on this page.
Radius scale
From a tight control corner to a fully rounded pill.
Elevation
Three shadow depths standing in for how close something feels to the surface.
Iconography
A consistent stroke weight and corner radius across the icon set.
Motion
Same distance, three easing curves. Pick one and watch the difference.
Theme
Light and dark, wired to the same switch as the one in the header.
02 Actions
Buttons and everything around them: states, groupings, and the controls people use to choose one thing among a few.
Button variants
Primary, secondary, ghost and danger, plus disabled, loading and a small size.
Button states
A save button that actually moves through idle, loading and confirmed.
Icon buttons
Icon-only controls with a tooltip on hover or focus.
Split button
A primary action with related alternatives one click away.
Button group
Attached buttons for independent, multi-select toggles.
Segmented control
A single choice among a small, fixed set of views.
Switches
On and off settings with a label and helper text.
Floating action button
A primary action that expands into related shortcuts.
03 Forms & Inputs
Every input primitive a real product form needs, from a plain text field to a multi-step wizard.
Text input
A field with a clear button that appears once there's something to clear.
Textarea
Grows with the content instead of scrolling inside a fixed box.
Select
A styled native select for a short, fixed list of options.
Combobox
Type-ahead autocomplete with keyboard navigation and match highlighting.
Multi-select tags
Type a name and press Enter to add it as a removable chip.
Date picker
A calendar popover for picking a single date.
Date range picker
Pick a start, then an end, with the days between highlighted.
Time picker
Hour, minute and AM/PM as independent steppers.
Number stepper
Increment or decrement, or type a value directly.
Range slider
Drag to set a value, with a live readout.
Selection controls
Checkboxes, radios and a switch, side by side.
OTP input
One digit per box, auto-advancing, with paste support.
Password strength
A meter and checklist that update as you type.
Color picker
A swatch palette with a live preview and hex value.
Rich text editor
Bold, italic, underline and a list, applied to real content.
Inline editing
Click text to edit it in place, save on Enter or blur.
Live validation
Feedback as you type, not just after you submit.
Multi-step wizard
A form broken into steps, with progress and validation gating each one.
Seen in: Wander
05 Data Display
Tables, lists, cards and boards for showing structured information at any density.
Advanced data table
Sort by clicking a header, drag headers to reorder, drag the edge to resize, hide columns, filter, select rows for bulk actions, double-click a task name to rename it, expand a row for detail, toggle density, or simulate loading.
Seen in: Pulse
List
A compact row layout for files, threads or anything with a type icon.
Tree view
Nested, expandable groups for a file or content hierarchy.
Timeline
A vertical sequence of events, most recent last.
Avatars
Sizes, a status dot, and a stacked group with overflow.
Tooltips
Extra context on hover or focus, in three directions.
Description list
Key-value pairs for a record's details, like an order summary.
06 Charts & Data Viz
Hand-built SVG charts, from a sparkline to a full interactive dashboard with filters.
Bar chart
Discrete values across a category axis.
Stacked bar
Two series composed into one bar per category.
Heatmap
Intensity across a grid, like a contribution calendar.
Funnel
Drop-off across a sequence of stages.
Gauge
A single value against its capacity.
Scatter plot
Correlation between two variables.
Live-updating chart
New values arrive on their own, the line keeps moving.
Interactive dashboard
Switch the date range and every stat and the chart update together.
07 Scheduling
Calendars, timelines and slot pickers for anything that revolves around a date.
Calendar
Month, week and day views. In week or day view, drag to create an event, drag an event to move it, drag its bottom edge to resize it.
Resource timeline
Who is booked when, across a shared day.
Availability slots
Pick an open slot, booked ones are already struck through.
08 Feedback
How an interface talks back: toasts, alerts, dialogs, loading states and the states nobody wants to design but every product needs.
Toasts
Fire a few at once and watch them stack and auto-dismiss.
Alerts & banner
Inline severity levels, plus a dismissible page banner.
Modal
Close it with the X, the backdrop, or Escape.
Confirm dialog
A focused ask before an action that can't be undone.
Popover
Click-triggered, richer than a tooltip, closes on outside click.
Spinners
Three sizes for three contexts.
Empty state
A reason and a next step, with a loading state in between.
Error state
What went wrong, and a way to retry.
404 & offline
The two states most products forget to design.
09 Layout
Structural pieces that hold everything else together and adapt to the space they're given.
Resizable split pane
Drag the divider to resize both sides.
Accordion
One section open at a time, with a real height animation.
Carousel
Swipe, click the arrows, or click a dot to jump.
Masonry grid
Variable-height items packed into even columns.
Bottom sheet
A mobile-native panel that rises from the bottom edge.
10 Settings & Admin
The back office: profile, permissions, user management, audit trail and billing.
Settings page
A sub-navigation next to the fields it controls.
Profile
Photo, name and bio, the basics of an account.
Notification preferences
Grouped switches for email and push.
Integrations
Connect or disconnect a third-party tool.
11 Builders & Editors
Tools for building things visually: forms, workflows, rules and media.
Form builder
Drag a field type onto the canvas, then drag fields to reorder.
12 Commerce
Product, cart, checkout, pricing and order tracking.
Pricing table
Switch monthly and yearly, the prices update together.
13 Communication
Chat, comment threads, notifications and composing a message.
Email composer
Recipient, subject and a formatting toolbar.
14 AI-Native UI
Patterns specific to working with a model: streaming replies, tool calls, citations and diffs.
Prompt input
Attachments, a model picker, and send, all in one bar.
Suggestion chips
One click to ask a likely next question.
15 Search
Finding things fast: autocomplete, faceted filtering and a results page that scales.
16 Onboarding & Auth
First run: signing in, signing up, and getting a new user oriented.
First-run empty state
What a brand-new workspace sees before it has any data.
17 Mobile
The same patterns, reconsidered for a phone-sized frame and a thumb.