Full width
Two buttons that stretch to the width of their container: a filled primary and an outlined cancel.
Sketchbook
313 numbered pages
Every demo in the docs is a page with a number. Filter, tick the ones you want, then copy the list or hand it to your AI.
313 of 313 shown
#001 inputs #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 password field with a trailing show/hide button.
#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 Liquid Glass FAQ questions, where opening one closes the others.
#068 surfaces Tone and glow
Two glass 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 glass Card with a Featured eyebrow, a heading, a description and an Explore materials link.
#070 surfaces Header and actions
A glass 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 glass 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 glass card skeleton with a circular avatar placeholder beside three text lines of different widths.
#098 feedback Image placeholder
A flush glass card skeleton with a 180px rectangular image placeholder above two caption lines.
#099 feedback Text lines
A glass 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 glass 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 glass card separated by horizontal dividers.
#125 display Vertical
Three text items in a row inside a glass 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 glass card.
#137 display Vertical scroll
A vertical ScrollArea capped at 220px tall containing 20 Lorem ipsum rows inside a glass 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 glass card.
#139 display Default (scroll)
A default SimpleTable listing three users with name, email, role and status in a flush glass 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 glass 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
A glass app bar with a title on the left and search, notifications and avatar on the right, inside a flush glass card.
#152 navigation With leading icon
A glass 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 glass 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 are negative, 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 glass 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 glass 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 Glass 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; inactive steps dim to 40%.
#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.