Admin dashboard
KPI cards, revenue chart, traffic sources and recent signups in the full admin shell.
Sketchbook
385 demos and 25 full pages
Every demo in the docs has a number, and the full pages of the templates sit beside them. Open any card to see it large, at phone, tablet or desktop width, in light and dark.
component (346) motion (39)
component/chart (30) component/display (69) component/feedback (38) component/foundation (19) component/input (86) component/layout (47) component/map (1) component/navigation (39) component/surface (17) motion/ambient (7) motion/basics (1) motion/micro (9) motion/scroll (7) motion/text (8) motion/transition (7)
aurora (5) bento (10) default (368) editorial (5) glassmorphism (14) liquid (1) skeuo (2) terminal (4)
expressive (51) immersive (9) none (100) subtle (225)
cursor (12) drag (32) hover (79) keyboard (265) none (78) press (225) scroll (21)
carousel (4) full-bleed (6) grid (36) overlay (50) single-column (125) split (13) stack (144) sticky (7)
both (383) light (2)
airy (12) compact (48) regular (325)
canvas2d (1) css (385) svelte-motion (39) view-transitions (1)
css (345) js-light (40)
410 of 410 shown
page Admin app page Admin app Admin users
Filterable table with selection, pagination and row actions.
page Admin app Admin new user
Create form built from AppForm and FormSection.
page Admin app Admin reports
Revenue, profit and conversion charts with breakdowns.
page Admin app Admin activity
Event timeline and login audit table.
page Admin app Admin settings
General, notifications, members and security tabs.
page Admin app Admin billing
Plan, usage, pricing cards and invoices.
page Admin app Admin profile
Profile form with notification and security preferences.
page App pages App dashboard
Compact dashboard: KPIs, revenue line chart, traffic donut and recent signups.
page App pages App users (CRUD)
List with filters, search and inline actions.
page App pages App products
Catalog list with search, filters and pagination.
page App pages App reports
Revenue, profit and conversion charts.
page App pages App activity feed
Timeline with a login audit table.
page App pages App settings
General, notifications, members and security.
page App pages App billing
Plan, usage bars, pricing cards and invoices.
page App pages App profile
Profile form with notifications and security.
page Auth Sign in
Split-screen email and password with OAuth options.
page Auth Sign up
Registration with inline validation.
page Auth Forgot password
Email recovery flow with a confirmation state.
page Auth beta Waitlist with map
Header bar, left-aligned form and a full-bleed live map panel on the right.
page Error and status 404 not found
Full-page state for a missing page.
page Error and status 500 server error
Full-page state for an internal server error.
page Error and status Maintenance
Planned downtime with a live countdown.
page Documentation beta API docs
Endpoint reference with sidebar, table of contents, code tabs and steps.
page Mobile beta Phone app
A mobile app at a real phone width: BottomNav, Sheet, MobilePane and StickyActions.
#001 inputs Full width
Two buttons that stretch to the width of their container: a filled primary and an outlined cancel.
#002 inputs With icons
Buttons with an icon before the label, after the label, and with a ghost download action.
#003 inputs Loading
Buttons in the loading state, including one that toggles loading for two seconds when clicked.
#004 inputs Sizes
The three button sizes side by side: small, medium and large.
#005 inputs States
Disabled buttons, a destructive action with an icon, and a link rendered as a button.
#006 inputs Variants
All five button variants in a row: filled, glass, outlined, ghost and destructive.
#007 inputs Disabled
Three disabled checkboxes: unchecked, checked and indeterminate.
#008 inputs States
Checkboxes in unchecked, pre-checked and indeterminate states, the first two bound to local state.
#009 inputs Without label
Three checkboxes with no visible label, named only through aria-label: bound, checked and indeterminate.
#010 inputs Basic
A searchable Combobox over eight frameworks that prints the selected value below the field.
#011 inputs States
Three Combobox states: with description and custom search and empty texts, with error and required, and disabled.
#012 inputs Default
A default CopyButton that copies an npm install command.
#013 inputs Icon only and toast
An icon-only CopyButton and a labelled one that shows a toast after copying, with a Toaster mounted.
#014 inputs Variants and sizes
CopyButton in three variants and two extra sizes, side by side.
#015 inputs Calendar and RangeCalendar
An inline single-date Calendar and a RangeCalendar, each printing its selected value below.
#016 inputs Min, max, error and disabled
Date and time inputs with constraints: a bounded DatePicker, a required DatePicker with an error, a disabled DateField and a read-only TimeField.
#017 inputs DateField and TimeField
Segmented DateField and TimeField inputs with bound values, minute granularity and 24h and 12h hour cycles.
#018 inputs DatePicker and DateRangePicker
A DatePicker and a DateRangePicker with popover calendars, each printing its selected value.
#019 inputs Default
An ExportMenu exporting three domain rows with custom column headers and a status line reporting the last export.
#020 inputs Basic
A multi-file FileUpload with a size limit and hint that reports how many files are selected.
#021 inputs Images only and disabled
Two FileUpload dropzones: one restricted to images with custom label and hint, and one disabled.
#022 inputs Role filter
A FilterGroup of three role options bound to a value that is printed below.
#023 inputs Documents and dates
Five MaskedField inputs for Brazilian documents: CPF, CNPJ, combined CPF or CNPJ, birth date and RG, with validators on three.
#024 inputs use:mask action
A native input masked with the mask action, showing the bound value below.
#025 inputs Phone and CEP
A PhoneField and a CepField that looks up an address asynchronously and prints the resolved street, district and city.
#026 inputs Min, max, negative, error and disabled
Four MoneyInput fields showing min and max bounds, negative values, an error message and a disabled state.
#027 inputs Currency and locale
MoneyInput in three currencies and locales: USD en-US, JPY without decimals and EUR de-DE.
#028 inputs Default
A default MoneyInput bound to a cents value, with the raw cents and formatted display printed below.
#029 inputs Helpers
Two money helper functions evaluated inline: centsToDisplay and parseInputToCents.
#030 inputs Basic
Two NumberField inputs in a Stack: an integer quantity with bounds and a decimal price with a step.
#031 inputs States
Four NumberField states in a Stack: with description, with error and required, disabled, and small.
#032 inputs Default
A verification-code PinInput that reports its value and completion, plus a masked four-digit PIN.
#033 inputs States
Four PinInput states: with description, with error, disabled with a partial value, and a text-type five-character key.
#034 inputs Cards
Radio group in `cards` variant with three plans, one disabled, bound to a selected plan.
#035 inputs Disabled
Two radio groups: one with a single disabled item and one fully disabled group.
#036 inputs Horizontal
Radio group laid out in a row with Small, Medium and Large options.
#037 inputs Vertical
Default vertical radio group of three fruits with the selected value printed below.
#038 inputs Default
Two segmented controls: a text-only Week/Month/Year period and a List/Grid view switch with icons.
#039 inputs Small, full width, disabled item
Small full-width segmented control with four items, one disabled.
#040 inputs Basic
Select with five framework options and the chosen value printed below.
#041 inputs Empty-value option
Select whose first option has an empty value labelled All projects, with the raw value printed.
#042 inputs Placeholder
Select with no initial value that shows placeholder text until a country is chosen.
#043 inputs States
Three selects showing a description, an error and a disabled state, with one disabled option.
#044 inputs Switch rows
Two setting rows, each with a label, a description and a Switch on the right.
#045 inputs Range
Two-thumb range slider from 0 to 100 with the selected price range printed beside it.
#046 inputs Single value
Two single-value sliders, Volume and Brightness, each with a live readout.
#047 inputs Step and disabled
A slider that snaps in steps of 10 and a disabled slider fixed at 35.
#048 inputs Custom colors
Swatch group with four custom colors where one swatch is disabled.
#049 inputs Theme presets
Swatch group of five theme presets: ocean, violet, emerald, rose, amber.
#050 inputs Basic
Two labelled switches, one starting off and one starting on.
#051 inputs Disabled
Two disabled switches, one off and one on.
#052 inputs Settings list
Settings list of three rows, each with a title, a subtitle and a Switch.
#053 inputs Without label
Two switches with no visible label, named only through aria-label.
#054 inputs Basic
Three text areas: empty, with a placeholder, and with initial content.
#055 inputs States
Six text areas showing description, error, required, read-only, disabled and fixed-size states.
#056 inputs Default
Two basic text fields: a full name and an email with type email.
#057 inputs With icons
Search field with a leading icon and a revealable password field.
#058 inputs States
Six text fields showing description, error, required, read-only, disabled and small size.
#059 inputs Basic
Theme toggle button rendered inside a rail container.
#060 inputs Single and multiple
Single-select alignment group, a required text filter and a multi-select formatting group.
#061 inputs Variants and orientation
Three toggle groups sharing one value: outlined, ghost and vertical.
#062 inputs No schema
Form built with useForm and a hand-written validate function, with Validate and Reset buttons.
#063 inputs Submit state
Form with a schema that simulates a 1.2 second submit, then shows a success message and resets.
#064 inputs With schema
Form using a schema for username length and bio length, with a live character count.
#065 surfaces Controlled
A single-open Accordion with its open item bound to state and the current value printed below.
#066 surfaces Multiple
An Accordion that lets several of its three items stay open at once.
#067 surfaces Single
A single-open Accordion with three FAQ questions about theming, where opening one closes the others.
#068 surfaces Tone and glow
Two Cards side by side: one with a brand tint and one with a brand glow, each with a title and one line of text.
#069 surfaces Content card
A single Card with a Featured eyebrow, a heading, a description and an Explore materials link.
#070 surfaces Header and actions
A Card with a built-in Team members header and an Invite button supplied through a headerActions snippet.
#071 surfaces Link card
A solid Card that is a link as a whole, with a Surface heading and a one line description.
#072 surfaces Stat cards
Three stat Cards in a flex row, each with a label, a large value and a delta line.
#073 surfaces Default (closed)
Three independent Collapsible FAQ panels stacked with a small gap, all closed initially.
#074 surfaces Open by default
A Collapsible that starts expanded with its open state bound and printed below it.
#075 surfaces Refraction layer
A LiquidGlass refraction layer using the regular optics preset behind a line of text in a padded frame.
#076 surfaces Elevation
Six solid Surface tiles showing elevation levels 0 to 5 in a wrapping row.
#077 surfaces Interactive
A Surface rendered as a button that counts how many times it was pressed.
#078 surfaces Materials
Five Surface tiles, one per material, over a brand to info to success gradient so the translucency is visible.
#079 surfaces Tone and variant
An 18 tile grid of solid Surfaces crossing six tones with three variants.
#080 feedback Async onconfirm
A destructive alert dialog whose async confirm handler waits 1.5 seconds before an Item removed note appears.
#081 feedback Basic and destructive
Two alert dialogs, a plain sign out confirmation and a destructive project delete, with an event log below.
#082 feedback Controlled pending
An alert dialog driven by parent state: the pending prop is set for 1.5 seconds before the dialog closes itself.
#083 feedback Chromeless
A medium dialog with the chromeless prop, so the content fills the panel edge to edge with no header or padding.
#084 feedback Confirmation
A small dialog asking to delete an item, with Cancel and Delete buttons in the actions snippet.
#085 feedback Form
A medium dialog containing an invite form with name, email and role fields and a Send invite button disabled until name and email are filled.
#086 feedback Info
An informational dialog with rich text about how Dialog works and a single Got it action.
#087 feedback Split
A split dialog with a media panel beside a lead form containing name, email and a Save button.
#088 feedback Notification panel
A right drawer, 400px wide, listing four notifications with unread dots and timestamps.
#089 feedback Right (default)
A default drawer titled Filters with status and role filter groups, two switches and Reset and Apply actions.
#090 feedback Left and bottom
Two drawers opened from separate buttons: a 280px left navigation drawer and a bottom sort drawer.
#091 feedback Open from a button
A lightbox opened from a button to show a single generated SVG image.
#092 feedback Animated
A progress bar that fills from 0 to 100 percent in steps of 5 every 100 ms when Start upload is clicked.
#093 feedback Determinate
Four determinate progress bars at 25, 50, 75 and 100 percent, each with a percent label.
#094 feedback Indeterminate
Two indeterminate progress bars labelled Loading and Syncing for work of unknown length.
#095 feedback Footer and swipeToDismiss
A bottom sheet titled Sessions with a footer button, opened with swipe to dismiss on or off.
#096 feedback Swipe to dismiss
A sheet titled Switch session with a description and a list of eight accounts that close it on click.
#097 feedback Card layout
A card skeleton with a circular avatar placeholder beside three text lines of different widths.
#098 feedback Image placeholder
A flush card skeleton with a 180px rectangular image placeholder above two caption lines.
#099 feedback Text lines
A card skeleton with a 60% wide heading line above a block of three text lines.
#100 feedback In a button
A Button that shows its loading spinner for two seconds after click and changes its label to Saving.
#101 feedback Section loader
A card with a centered 40px spinner and a Loading data text.
#102 feedback Sizes
Three spinners side by side at 16, 24 and 40 pixels.
#103 feedback Variants and duration
Eight buttons that trigger toasts: five variants and three duration cases, with one Toaster mounted.
#104 display Closable
Two dismissible alerts, an info one with a title and a warning one, that are replaced by a short dismissed note once closed.
#105 display Severities
The four alert severities stacked: success, warning, error and info, each with a one-line message.
#106 display With title
Two alerts with a bold title above the body text: a success and an error.
#107 display With image
A row of four large avatars loaded from image URLs.
#108 display Initials fallback
Large avatars with no image source: three given only `alt` names and two given explicit `fallback` text.
#109 display Shape and status
Large avatars showing the rounded shape and the four status indicators: online, busy, away and offline.
#110 display Sizes
Avatars at every preset size from extra small to extra large, plus a custom numeric size.
#111 display Avatar stack
An overlapping avatar stack of three photo avatars and a fourth `+4` overflow avatar.
#112 display Colors
A notification bell icon button wrapped in a count badge, shown in the four badge colors.
#113 display Dot and counts
Four badges on icon buttons: a dot, a count of 3, a count of 99 and a count of 100.
#114 display On avatars
Three medium avatars each carrying a status dot in success, warning or error color.
#115 display Basic
Three plain chips with text labels.
#116 display Deletable
Removable chips: deleting one drops it from the list, and a reset link appears when all are gone.
#117 display With icons
Three chips each with a leading lucide icon: star, zap and tag.
#118 display Selectable
Two toggle chips, Filter A starting off and Filter B starting on, that flip on click.
#119 display StatusChip
StatusChip in its five statuses: success, warning, error, info and neutral.
#120 display Variants and size
Chip color variants (default, brand, success, warning, error, info) plus a small size chip.
#121 display Languages
Three CodeSnippet blocks highlighting Svelte, TypeScript and CSS sources.
#122 display Controlled mode
A DataTable driven from outside: filter, sort and pagination state live in the page, which slices 12 users into pages of 5.
#123 display Simple mode
A DataTable with five columns and 12 user rows, passing only `columns` and `data`.
#124 display Horizontal
Three stacked text sections inside a card separated by horizontal dividers.
#125 display Vertical
Three text items in a row inside a card separated by vertical dividers.
#126 display In a results table
A table of three domains where each row ends with an ExternalLink to a registrar URL.
#127 display Fixed ratio
An Image with an inline 4:3 gradient SVG, constrained to a 360px wrapper.
#128 display srcset and sizes
An Image with a two-rendition `srcset` (400w and 800w) and a `sizes` hint, in a 420px wrapper.
#129 display Shortcuts in text
Keyboard key caps inline in a sentence describing the Ctrl+K shortcut to open the command palette and Esc to close it.
#130 display Streaming rows
A LiveList that streams in 40 simulated domain availability checks, one every 150ms, after a Start bulk check button is pressed.
#131 display Controlled
A NotificationBell whose notifications live in state and are updated by its read, read-all and clear callbacks.
#132 display Default
Two NotificationBell triggers side by side: one given three notifications and one given an empty list.
#133 display Basic
Pagination for 100 items at 10 per page, with the current page bound to state and printed below.
#134 display Few items
Pagination with 30 items at 10 per page and no bound state.
#135 display More siblings
Pagination for 200 items at 10 per page with two sibling pages shown on each side of the current page.
#136 display Horizontal scroll
A horizontal ScrollArea with an always visible scrollbar holding a row of 24 Tag chips inside a card.
#137 display Vertical scroll
A vertical ScrollArea capped at 220px tall containing 20 Lorem ipsum rows inside a card.
#138 display Cards on narrow containers
A SimpleTable that turns each row into a stacked card on narrow screens, listing three users in a flush card.
#139 display Default (scroll)
A default SimpleTable listing three users with name, email, role and status in a flush card.
#140 display Simple
A basic Timeline of four project milestones, each with a label and a date.
#141 display With variants
A Timeline of an order's five tracking events, coloured by variant, with descriptions and timestamps.
#142 display Text trigger
A Tooltip wrapping plain inline text, which becomes the hover and focus trigger.
#143 display Custom delay
Three tooltips with different open delays on buttons: instant, default and slow.
#144 display On icon buttons
Four icon-only buttons (Info, Heart, Zap, Star) that each reveal a Tooltip describing the action.
#145 display All sides
Four outlined buttons whose tooltips open on the top, right, bottom and left side.
#146 navigation autofocus
An input that receives focus on mount, with a button that remounts it through a keyed block.
#147 navigation clickOutside
A box that counts how many clicks land outside it using the clickOutside action.
#148 navigation clipboard
A native button that copies an install command to the clipboard and shows a Copied! label for two seconds.
#149 navigation focusTrap
A button that opens a box where Tab stays trapped among three buttons until Close is pressed.
#150 navigation longpress
A native button that fires a long-press handler after an 800ms hold and shows Long press! for 1.5 seconds.
#151 navigation Default
An app bar with a title on the left and search, notifications and avatar on the right, inside a flush card.
#152 navigation With leading icon
An app bar with a menu button in the leading slot and an Upgrade button plus avatar in the trailing slot.
#153 navigation Levels
Four stacked breadcrumbs with 2, 3, 5 and 1 levels, where the last item is the current page without a link.
#154 navigation Custom separator
A breadcrumb with a custom separator character between three items.
#155 navigation Keyboard
A static list of four keyboard hints for the command palette, each pairing a Kbd key with a description.
#156 navigation Open the palette
A command palette opened by a button, filtering two modules of navigation items and reporting the picked path.
#157 navigation Left and right
Two buttons that open a left navigation drawer and a right settings drawer.
#158 navigation Default
A dropdown menu of file actions with icons, a separator and a destructive Delete item, reporting the last action.
#159 navigation Icon trigger
A dropdown menu opened by a three-dot icon button, with Share and Copy link items aligned to the end.
#160 navigation Basic
A popover opened from a button, containing a sentence of text and a Confirm button.
#161 navigation Form
A popover anchored below-start of a button that holds a text field with Cancel and Save buttons.
#162 navigation Horizontal stepper
A four-step horizontal stepper inside a card with Back and Next buttons that advance the step.
#163 navigation Controlled
Tabs bound to a state variable with a line below showing the active tab value.
#164 navigation Default
An uncontrolled tab set of Overview, Props and Examples, each with a short paragraph of documentation text.
#165 layout Anatomy
A labelled diagram of the app shell showing a 52px rail, a 200px panel and the main content area.
#166 layout Live shell
A working app shell with a rail, panel and page content whose pathname lives in local state and updates on navigation.
#167 layout Basic
An empty inbox state with an icon, a title, a description and a Compose message button.
#168 layout Hero
A hero-sized empty state inviting the user to start a first project, with Create project and Import buttons.
#169 layout No icon
An empty state without an icon, showing a title, a description and a Create item button with a Plus icon.
#170 layout No results
A no-results state for search with a magnifier icon and a Clear filters button.
#171 layout Error or offline
A load-failure state with a wifi-off icon and Retry plus Contact support buttons.
#172 layout 404 without actions
The ErrorPage component rendering a 404 status without its action buttons.
#173 layout Basic form
A complete user creation form with a header, two sections, bound fields and a footer with Cancel and Create user.
#174 layout Without header
A compact form page with no title or description, one section and a Cancel and Save footer.
#175 layout Basic metrics
Three KPI cards with title, value, an optional unit, a positive or negative trend and an icon, inside a KpiGrid.
#176 layout Negative trend
Two KPI cards whose trends fall and are good news (`trendTone="positive-down"`), one with an icon and one without.
#177 layout Without trend
Three KPI cards without a trend value, one with an icon and two plain.
#178 layout Four cards
A KpiGrid holding four KPI cards: Revenue, Users, Growth and Uptime, each with a trend and icon.
#179 layout Three cards
A KpiGrid holding three KPI cards to show how the grid lays out an odd number of items.
#180 layout Container and Section
A Container and Section holding a Stack of two plan cards, showing the page-level layout primitives.
#181 layout Responsive Grid
A Grid with responsive column counts and gaps holding eight numbered cells.
#182 layout Flex, Stack and Box
A Stack with a wrapping Flex row of three chips above a single padded Box.
#183 layout AppList
A searchable, filterable users list with a New user action, a role filter and a table with user cell and status chip.
#184 layout AppSettings
A settings page with General and Security tabs, a Save action and form sections with text fields and switches.
#185 layout PageShell
A dashboard page shell with four KPI cards and a placeholder card for a chart or table.
#186 layout Chat
A button that opens a full-screen mobile pane titled Maria Souza with a message list, a header action and a composer.
#187 layout Dashboard page
A page shell inside a flush card with a title, description, New report action, four KPI cards and a placeholder card.
#188 layout End aligned
A scrolling form whose sticky Cancel and Save bar only appears once the Name field has text.
#189 layout Stretch
A scrolling area with a sticky bar whose Back and Continue buttons stretch across the width.
#190 charts Horizontal bars
A horizontal bar chart ranking eight products by a single Sales series, with values formatted as thousands.
#191 charts Stacked bars
A stacked bar chart splitting six months of revenue into four acquisition channels.
#192 charts Grouped and stacked
A bar chart with Grouped and Stacked buttons that switch the same two-year quarterly data between layouts.
#193 charts Vertical bars
A vertical bar chart of one Revenue series across four quarters.
#194 charts Animated counter
A ring gauge that counts up from 0 to 94 on mount, with a text label that changes with the value.
#195 charts Progress ring
A ring gauge controlled by a slider, starting at 65.
#196 charts Simple gauge
A single gauge showing a score of 78 with a Score label.
#197 charts Custom zones
Three gauges (CPU 67, Memory 82, Disk 45) that share colour zones for success, warning and error.
#198 charts Calendar heatmap
A calendar heatmap of daily commit counts from 2026-01-01 to 2026-09-15.
#199 charts Hour by day matrix
A matrix heatmap of task counts by hour of day (24 columns) and weekday (7 rows).
#200 charts Year toggle
A calendar heatmap with 2026 and 2025 buttons that swap the dataset and date range.
#201 charts Area with gradient fill
A single Revenue line with a filled area under it across nine months.
#202 charts Multi-line comparison
A line chart with three series, Revenue, Expenses and Profit, across nine months.
#203 charts Simple line
A basic line chart of a single Revenue series over nine months.
#204 charts Real-time stream
A live line chart that shifts in a new Live revenue point every 800 ms over a 20-point window.
#205 charts Dashboard
An analytics dashboard combining four KPI cards with line, stacked bar, donut, scatter, calendar heatmap, gauge and radar charts.
#206 charts Animated proportions
A donut chart with Q1, Q2 and Q3 chips that switch which quarter of data the chart shows.
#207 charts Donut with center KPI
A donut chart with a total value and caption shown in the centre.
#208 charts Basic donut
A donut chart of market share split across five categories.
#209 charts Rose chart
A Nightingale rose chart of six product areas, using the rose prop on PieChart.
#210 charts Comparison
A radar chart comparing Team A and Team B across six dimensions.
#211 charts Interactive team builder
A radar chart for My team with six sliders that edit each dimension live.
#212 charts Simple radar
A radar chart of one team, Team Alpha, across six dimensions.
#213 charts Basic scatter
A scatter plot of 80 generated points in a single Data points series.
#214 charts Bubble chart
A bubble chart where each of 50 accounts carries a third value that sets the bubble size.
#215 charts Clustered by tier
A scatter plot with three named series, Premium, Standard and Free, of 30 points each.
#216 charts Bar sparklines
Three labelled bar sparklines with up, down and neutral trends in a wrapping row.
#217 charts KPI cards with trend lines
Four KPI cards, each with a value, a change percentage and a trend-coloured sparkline.
#218 charts Live streaming micro charts
Three live sparklines for CPU, Memory and Network that shift in a new value every 600 ms.
#219 charts Table row sparklines
A table of four products with an inline sparkline per row and a text trend label.
#220 foundation Brand
Six swatches for the brand color tokens, each showing its name and CSS variable.
#221 foundation Outline
Three swatches for the outline tokens, drawn with a border so they stay visible on the page.
#222 foundation Semantic
Four swatches for the semantic status color tokens: success, warning, error and info.
#223 foundation Surfaces
Four swatches for the surface tokens from sunken to overlay, drawn with a border.
#224 foundation Text
Four swatches for the text color tokens: primary, secondary, hint and disabled.
#225 foundation Button glass variants
Three native buttons using the glass button classes over a brand to info gradient backdrop.
#226 foundation Material tiers
Five glass surfaces at elevations 1 to 5, from Ultra thin to Chrome, over a three color gradient.
#227 foundation Tinted and glowing
Three glass surfaces over a gradient: tinted, glowing, and tinted with glow.
#228 foundation Shadow scale
Five cards, each with one shadow token from xs to xl, labelled with its name and CSS variable.
#229 foundation Body and UI scale
Seven body text size tokens from Body 1 to Nano, each rendered as a sample line.
#230 foundation Font families
The three font family tokens, sans, display and mono, each with a sample sentence.
#231 foundation Heading scale
Six heading size tokens, Heading 1 to Heading 6, each rendered as a bold sample line.
#232 docs-kit LinkCard, CardGrid and MethodBadge
A CardGrid with two LinkCards, followed by a row of five MethodBadges for the HTTP verbs.
#233 docs-kit CodeTabs
Two CodeTabs groups, each with cURL and Node.js tabs, that share the selected language through the same sync key.
#234 docs-kit DocsNav and TableOfContents
A DocsNav sidebar with two groups and a TableOfContents of four headings rendered side by side.
#235 docs-kit ca-prose, Callout and Steps
A documentation article using the ca-prose wrapper with headings, two Callouts, a Steps list and a request fields table.
#236 docs-kit DocsSearch
A DocsSearch dialog opened from an Open search button over a two-entry index, showing the selected href afterwards.
#237 navigation Scrollable
Seven tabs in a narrow container where the list scrolls horizontally with edge fades.
#238 navigation Icons
Tabs with a Lucide icon, a brand-colored svg icon and a scheme-aware monochrome icon next to each label.
#239 navigation Leading icons and brand logos
A dropdown menu of agents where brand-colored icons opt out of the item's text color, including a scheme-aware monochrome mark.
#240 display IconFallback
Two large avatars whose fallback is a custom icon: one with an image that fails to decode and one with no image.
#241 feedback The skeleton prop
Avatar, KpiCard, TextField and Card all switched to their skeleton state by one shared loading flag.
#242 feedback Gallery with video, caption and download
A lightbox gallery with three items, two images and one video, each with a caption and some with meta text.
#243 feedback iOS instructions
The install prompt in iOS mode, showing add to home screen instructions inside a reserved stage box.
#244 feedback Native prompt
The install prompt in native mode, triggered by a stand-in beforeinstallprompt event fired on mount.
#245 layout Apps
A record list of three apps with an avatar identity, scopes, install count, status chip, created date and a row menu.
#246 layout Without a menu
A three column record list of webhooks with no actions slot, so there is no trailing menu track.
#247 layout Phone width
The same record list inside a narrow slot, to show it stacking because the list reads its own width.
#248 display A grouped conversation
A grouped chat thread: two incoming bubbles from one sender with a name and avatar, then an outgoing read bubble.
#249 display Delivery status
Four outgoing bubbles, one per delivery state: pending, sent, delivered and read.
#250 display Quote and reactions
An incoming bubble with a reply quote at the top and two reaction chips under it.
#251 display Inbox
An inbox of four conversation rows: unread count, pinned, muted, typing, with the selected row highlighted.
#252 display Voice messages
Two voice message players: one with a waveform from peaks, one with flat placeholder bars.
#253 display Mixed media
A media grid of six items (images, a video, a document) showing four tiles and a +2 overflow that opens the gallery.
#254 display Chat history
A windowed chat history of 40 messages that loads 30 older ones at the top without moving the view.
#255 navigation Fast and slow loads
A LoadingBoundary around a suspending report with a fast (100 ms) and a slow (1.5 s) load button.
#256 motion Fade rise
A card that fades in while rising 16px into place, replaying on a loop only while it is in view.
#300 motion Split text reveal
A headline whose words rise out of a clipping mask one after another, 70ms apart. The unsplit sentence stays the accessible name; the split words are aria-hidden.
#301 motion Text scramble
A line of monospace text that decodes from random glyphs, locking one letter every 55ms from left to right. It re-runs on every loop and again on hover or focus.
#302 motion Odometer roll
A KPI value made of digit columns that slide to the new digit, the ones place first and each column 60ms after the last. It cycles through values on its own; typing a number rolls it.
#303 motion Infinite marquee
A row of partner names sliding left forever at a constant speed, with a seamless loop. Hovering or focusing any name pauses it; Back and Forward buttons nudge it once you take over.
#304 motion Typewriter
A prompt that types itself at 55ms per character, holds for 1100ms, then deletes at 28ms per character while a caret blinks. Typing in the field below takes over the line.
#305 motion Shine sweep
A heading painted with a brand gradient and a light band that sweeps across it in 2200ms. Once you move the pointer or press arrow keys the band follows you.
#306 motion Count up
A KPI that counts from 0 to 12,480 in 1400ms with an ease-out-expo curve, so the last digits settle slowly. A Count again button replays it on demand.
#307 motion Blur in
A two-line headline that sharpens from a 12px blur while rising 8px, each line 160ms after the previous. The sentence keeps one accessible name; a button replays it.
#320 motion Staggered reveal on scroll
A feed of cards inside a scroll container: each row fades in and rises 24px as it enters, a short stagger between rows that arrive together.
#321 motion View timeline reveal
Tiles tied to their own position in the scroll area: opacity, rise and scale advance exactly as far as the tile has entered, in both directions, with no JavaScript when the browser supports view timelines.
#322 motion Parallax
Three layers (sky, ridge, foreground) plus a caption move at different speeds while the container scrolls, so the scene gains depth. Native scroll timeline, with a scroll listener fallback.
#323 motion Reading progress bar
A 4px bar stuck to the top of an article fills from left to right as it is read, with a percentage readout, tied directly to scroll position.
#324 motion Horizontal scroll section
Vertical scrolling inside a pinned frame slides a row of four step cards sideways, with a progress bar underneath. The page scrolls down; the content moves across.
#325 motion Pinned step story
A pinned media panel on the left changes its figure and caption as each step on the right scrolls through the middle of the frame; the step in view has the primary title colour, the others the secondary one.
#326 motion Scroll-linked counter and chart draw
A revenue figure counts up from $0 to $48,210 while a line chart draws itself, both tied to the container's scroll position; scrolling back reverses them.
#340 motion Magnetic button
A pill button that leans toward the pointer inside a 72px range, pulled by a Spring and released on leave.
#341 motion Press spring
A button that scales to 0.94 on press and overshoots past 1 on release before settling, driven by a Spring.
#342 motion Morphing toggle
A sun icon that morphs into a moon: a mask circle slides over the disc to bite it into a crescent while the rays rotate and shrink away.
#343 motion Like burst
A like button whose heart pops to 1.45 and throws eight particles outward while the count ticks up; aria-pressed carries the state.
#344 motion Hold to confirm
A destructive button that only fires after a 1.2 second hold, filling a progress ring; releasing early cancels and drains the ring. Space and Enter work the same way.
#345 motion Copy to check
A copy button whose two sheets scale away while a check mark draws itself, then it reverts after 1.6 seconds.
#346 motion Add to cart fly
Tapping Add to cart sends a dot flying from the button to the bag, then the badge count bumps with an overshoot.
#347 motion Tilt card
A stat card that leans up to 10 degrees toward the pointer in 3D and settles flat on leave, driven by a Spring.
#348 motion Spring switch
A switch whose thumb stretches to 1.3 on press and overshoots into place on release.
#360 motion Shared element
A plan cover that morphs from a list tile into the detail card through the View Transitions API, with a plain crossfade when the API is missing.
#361 motion FLIP reorder
A sortable list whose rows slide to their new position instead of teleporting when the sort changes (First, Last, Invert, Play).
#362 motion Height spring
An FAQ accordion whose panels open and close with a spring on their height, overshooting slightly before they settle.
#363 motion Tab indicator
The package Tabs with one pill that slides and stretches under the active tab instead of each tab repainting its own background.
#364 motion Stacked toasts
Toasts that slide in from above, stack with a depth cascade (each older one lower, smaller and dimmer) and leave when dismissed.
#365 motion Sheet spring
A bottom sheet that springs up over its page, follows your finger when dragged down and either dismisses or springs back depending on distance and speed.
#366 motion Filter list
Filter chips over a list: rows that no longer match shrink and fade out, survivors slide into the gap, and the total counts to its new value.
#380 motion Cursor spotlight
A pricing grid lit by a soft brand spotlight and a grid of fine lines that only shows inside the light; the light eases toward the pointer.
#381 motion Grid ripple
A grid of dots where a click sends a wave outward: each dot swells and fades back after a delay equal to its distance from the click.
#382 motion Animated gradient field
A KPI card on a gradient field whose hue and angle drift slowly through registered CSS custom properties; the pointer takes over and paints it.
#383 motion Before and after slider
A before and after compare slider: a handle clips the old design over the new one, and a spring snaps it to 25%, 50% or 75% on release.
#384 motion Cursor trail
A chain of 14 dots that eases after the pointer, each one shrinking and following the dot ahead; autoplay traces a looping path.
#385 motion Hero intro sequence
A hero block whose eyebrow, headline, copy and buttons enter one after another, each rising 14px and fading in, 90ms apart.
#386 motion Card tilt with glare
A payment card that leans up to 10 degrees toward the pointer on a spring while a soft glare slides across its surface.
#387 inputs Shift range selection
Five checkboxes where Shift+click selects the whole range from the last clicked row, using the forwarded onclick and data-testid.
#388 inputs External trigger, no list
A FileUpload without its built-in list, opened from an Add files button in the section header; picked names are listed by the page.
#389 inputs Hidden label
Two inline TextFields whose label is kept for screen readers only with hideLabel, plus native maxlength and a bound ref.
#400 navigation Checkbox and radio items
A view menu with two checkbox items and a radio group for the sort order, kept open while options change, with the current state shown below.
#401 navigation Submenus
An item menu with Rename, a Color submenu, a Move to submenu and a destructive Delete, reporting the last action.
#402 navigation Context menu
A dashed button area that opens a Rename, Duplicate, Delete menu at the pointer on right-click, or from the keyboard with Shift+F10 or the ContextMenu key.
#420 inputs Multiple
A multi-select Combobox with removable chips, starting with two labels selected and echoing the array below.
#421 inputs Creatable tags
A multi-select Combobox that offers a Create row for text that matches no tag, and adds the new tag to its options.
#422 navigation Async results
A CommandPalette whose async `search` returns grouped invoice and customer records after a simulated 600 ms server delay.
#430 foundation Sortable list
A checklist whose rows reorder by dragging a grip, by touch press-and-hold, or with the keyboard (Space, arrows, Enter).
#431 foundation Board
A three-column board: cards reorder inside a column and move between columns by mouse, touch or keyboard.
#432 foundation Drop zones
Task chips dragged from a tray onto weekday drop zones, with a dashed highlight while a chip is over a day.
#433 display Groups
A DataTable of tasks grouped into collapsible sprints, with a resizable Task column, drag-to-reorder rows between groups and a button inside a cell.
#460 navigation Line
Tabs with variant="line": bare text tabs with an underline on the active one, used as a view switcher with no panels.
#461 feedback Own header
A drawer without a title whose own header carries the item key, a heading and a close button; aria-labelledby names the panel.
#462 feedback Type to confirm
A destructive alert dialog with a rich description and a TextField body; Confirm stays disabled until the key is typed.
#470 navigation Close on pick
A button showing the chosen date that opens a popover holding a calendar; picking a day closes the popover.
#480 layout Panel width
An app shell whose panel starts at 280px for long item names and has a drag handle on its edge.
#481 layout Color, count, actions and reorder
App shell panel rows with a color dot, a neutral count, a per-row actions menu and drag-to-reorder.
#482 surfaces Stacked controls
A Card titled Trending topics that stacks three Checkbox controls in a column with gap="sm", the title aligned with the controls.
#490 feedback Dedupe and replace by id
Two buttons: one fires the same error ten times and shows a single toast with a ×10 badge, the other replaces an uploading toast by id.
#491 display Dense, pinned and grouped
A dense SimpleTable of leads inside an already framed, horizontally scrolling panel: compact rows, two pinned columns, collapsible stage groups, a sortable Name header and clickable rows.
#492 feedback Description and action
Three buttons that fire a toast with a description, with one inline action, and with both.
#500 inputs Password
A sign-in pair of TextFields: a required email and a revealable password with a Forgot password link under it, neither showing an asterisk.
#501 navigation Basic
A language switcher with three options named in their own language; picking one awaits an async onselect before the value changes.
#502 navigation In header
A site header whose trailing end holds a LocaleSwitcher next to a filled Sign up button.
#530 layout Labels, search slot, badges and More
An app shell with captions under the rail icons, a search trigger on top of the rail, per-module badges and a More sheet on mobile.
#531 layout Stage
An app shell with a persistent stage behind the pages: mounted once, click-through content, hide and pause.
#540 display Display role
Three Heading samples: a fluid display headline, a smaller display-3 heading and an h2 element drawn at the h4 size.
#541 display Animated and static
A sentence with one animated marker-pen highlight and one static highlight.
#542 display Strike and rewrite
A rewrite line: one struck-out word with an animated pen line, followed by an animated highlighted replacement.
#543 surfaces Paper grain
Three solid Surface tiles: static paper grain, animated paper grain and no grain.
#600 layout Reading width with an aside
A PageShell with width="reading" (form column capped at 46rem) and an aside snippet holding a section index, inside a fixed-height frame.
#601 layout Short panel
An app shell with one module of two items and collapseShortPanel: only the rail shows, the page uses the full width.
#610 layout Map, split and page
A PageFrame floating a 352px panel over a stand-in map, with a mode switch (map, split, page), a side switch and a live readout of the covered pixels from stageInsets.
#640 inputs Neutral tone
One brand filled Button beside secondary actions drawn with tone="neutral": an outlined Button, a small ghost Button and an outlined IconButton.
#641 feedback Sizes
Four Progress bars at 60% showing size sm (4px), size md (6px) and the default lg (8px), plus an indeterminate sm bar.
#642 layout Stats in a card
A Card titled This week holding three card-less Stat blocks in a responsive grid: leads with a hint, reply rate with a unit, trend and hint, and booked calls with a positive trend.
#700 feedback Chromeless, full bleed on phones
A chromeless drawer for a detail view with its own header, close button and scrolling list; full width and height on phones.
#720 inputs Wrapping chips
Single-choice chips for a sales team size: five short options that wrap to two rows on a phone.
#721 inputs Required choice with error
ChipGroup inside a native form with a required choice and a field error shown after submitting without a selection.
#760 display Leads pipeline
A three-stage leads pipeline board: status-coloured columns that scroll on their own, cards that move between columns by drag, keyboard or a Move to menu, and a New column that loads more pages.
#761 display Money total per column
A deals pipeline board that shows the money total of each column next to its count, keeping the stage colour rail, title and count that a custom header would replace.
#780 layout Scoped block
ThemeIsland as a scoped block: a light ocean island inside a dark page.
#781 layout Full page
Full-page ThemeIsland with `document`: html and body take the island's preset and scheme while it is mounted.
#800 map Themed map
A map stage with an offline light and dark basemap, four deck.gl store circles in the brand color and zoom and compass controls.
#840 layout Flat panel
Full-page AuthLayout whose side panel is flat (solid surface, no gradient, no blobs) with a toggle back to the brand gradient.
#841 inputs Sign-up field
A password field with a 3-step strength meter and a polite text label under it.
#842 inputs Your own rule
A strength meter driven by your own length rule, with custom label text.
#843 inputs Sign-in form
A sign-in form with a Turnstile captcha: no token without the check, reset() after a submit.
#844 feedback Boot
A button that boots a fake app: the splash shows at least 800ms, waits for ready, then leaves and reports ondone.
#845 display Decorative
Avatars next to a visible name, marked decorative so a screen reader says the name once.
#860 layout Status tokens
Three lead-status pills colored by preset domain tokens, plus a canvas bar per status colored with tokenRgba.
#861 foundation Type roles
The six type roles (title, heading, body, label, caption, num) rendered with Text, one row each.
#880 inputs Component tokens
A dense focus-mode toolbar that restyles Button, IconButton and Kbd with component tokens on one wrapper: tighter gap and line-height, a regular-weight large button, wider small padding, a borderless ghost button, a 36px icon button and a square keycap.
#881 layout Dense CRM with component tokens
A dense CRM activity card whose Avatar, TextField, TextArea, Card, SegmentedControl and EmptyState are restyled only through component tokens declared on one wrapper: neutral avatars, tighter field gap, a 64px note box, a hairline flat card, compact segments and a bare empty state.
#900 display Inline pill
A follow-up list where each row has a title and an inline subtle Badge pill with a status dot: Overdue (danger), Due today (warning), Done (success) and a neutral Draft without a dot.
#901 inputs Responsive keyboard hint
Two outlined neutral Buttons (Next lead, Snooze) with a Kbd keyboard hint in the trailing slot, marked trailingHint so the hint disappears below md and on touch screens without leaving a gap.
#902 inputs Align between
A stack of three full-width outlined neutral Buttons with align="between": label at the start, a Kbd hint at the end; the last one is loading and keeps its spinner at the start.
#910 feedback Configured split
A split dialog sized 66vw by 88svh with a 2fr/3fr column ratio that goes full screen under 600px: a map column beside a details column with a Close button.
#940 navigation Profile mention
A sentence with an @ada mention link that opens a profile card with a name, a line of detail and a View profile link on hover or keyboard focus.
#941 navigation Delays, side and bind:open
An outlined Plan details button with a top-start hover card, plus a button that shows or hides the card from code and a line reporting the last user-driven change.
#942 navigation File menu
A dashed file area that opens a Rename, Pinned, Move to and Delete menu at the pointer on right-click, at the finger on a long touch press, or from the keyboard with Shift+F10.
#943 navigation One menu per row
Three invoice rows, each its own context menu with a label, Open and Send reminder, and a 400 ms long-press delay for touch.
#944 navigation Editor menu bar
An application menu bar with File, Edit, View and a disabled Help menu; File has a submenu, View has a checkbox and a radio group, and a line below reports the last action.
#945 navigation Bar open state
A two-menu bar (Share, Insert) with a line reporting whether any menu is open through onOpenChange.
#946 navigation Marketing header
A marketing header nav with Products and Resources disclosure buttons that open panels of links (Products links carry a description), followed by Pricing (the current page) and Contact links.
#947 navigation Delays and alignment
A two-item docs nav (Guides, Reference) that opens on hover at once and stays open 400 ms after the pointer leaves.
#960 display ratio and fit
One 4:3 gradient file rendered in three boxes: ratio 16/9 (cropped), ratio 1 (cropped) and ratio 1 with fit contain (letterboxed).
#961 display Embed
An AspectRatio of 16/9 inside a 28rem frame holding a centred caption, standing in for a video or iframe.
#962 layout Two panels
A two-panel horizontal group (Files 25%, Editor 75%) in a bordered frame with a caption showing the live percentages.
#963 layout Nested and saved
A persisted horizontal group (Folders, Main) whose Main panel holds a vertical group (Messages over Reader).
#964 display Highlights
A four-slide carousel (Plan, Build, Ship, Learn) with arrows and dots, bound to an index shown in a caption.
#965 display Several per view
Five plan cards shown three at a time in a looping carousel.
#966 display Autoplay
A looping three-quote carousel that advances every 4 seconds, with a Pause button and no arrows.
#980 inputs Text, icon and filled groups
Three ButtonGroups: text buttons (Day, Week, Month), icon buttons (Bold, Italic, Underline) and a filled plus destructive pair.
#981 inputs Split button and vertical
A split button (Publish plus a chevron DropdownMenu trigger) and a vertical ButtonGroup of two icon buttons.
#982 inputs Text addons
Five TextFields with text addons inside the border: a URL (https:// and .com), a price ($ and USD), a small @handle, an error with a .dev suffix and a disabled one.
#983 inputs Button addons
Two TextFields with a button inside the border: a read-only share link with a copy IconButton and a coupon code with an Apply button.
#984 layout Trend tone
Three KPI cards where the trend colour follows what is good news: churn falling is green, response time rising is red, sessions are neutral.
#985 layout Sparkline
Two KPI cards with an icon and a sparkline under the number: a line for active users and bars for churn, with a hint line.
#986 layout Inline content
A button pair inside a PreviewStage at 390 px, with a toolbar button that flips the content between light and dark.
#987 layout A whole page
A whole page (the sign-in template) in a PreviewStage iframe, laid out at the chosen width with its own media queries.
#988 feedback Hear it
A sound toggle with volume, a profile picker (system, glass, brutalism, terminal) and a board of buttons that each play one cue.
#989 feedback Components
Button, Switch, Tabs, Slider, Toast and Dialog with their sound prop on, behind one sound toggle.
#990 inputs Brand color
Color field with a swatch, a native picker, a text input and a live WCAG contrast readout against white.
#991 inputs Text color
Color field for a text color measured against a white page, with a sample line in that color.
#992 inputs Label and number
Two labelled sliders with an editable number and a unit: radius and type scale.
#993 concepts Viewport simulator
An interactive phone drawing with a device-shape selector, switches for collapsed browser bars and edge-to-edge drawing, a keyboard height slider and a keyboard resize mode, plus a table of what 100lvh, 100svh and 100dvh resolve to and how much of each is hidden.
#994 concepts A hero that is a floor
A phone-sized scrollable frame holding a hero (eyebrow, heading, lead, filled Button) and a second section, with a switch for 200% text and a long translation and a switch for a continuation cue.
#995 concepts A form with the keyboard open
A scrollable account form with three TextFields (work email, company, role) and a StickyActions bar with a stretched Continue button, wrapped in the keyboardAware action.