Learn a component in five minutes.
107 lessons, one per component. Each one is the thing running, the knobs that change it, and the code that drew it — nothing else. 17 of them have a playground.
Actions
- Button Playground MD3 buttons, the Expressive way.
- Button Group MD3 button group — a row of buttons that reads as one control.
- FAB Playground MD3 floating action button. Three sizes (40 / 56 / 96dp), plus
extendedfor the pill that carries a label next to the icon. - Icon Button Playground MD3 icon button. Same tone system as
Button, but its own geometry: height comes fromsize, width fromwidthas a ratio of that height (MD3's narrow / default / wide, which are ~0.8× / 1× / 1.3×). - Segmented Button MD3 segmented button.
- Split Button MD3 Expressive split button.
Inputs
- AI Image A picture made from a sentence — the frame, the prompt bar, the wait and the picture, wired to whichever model you have.
- Calendar Month grid — one date, a range, or a handful of dates.
- Code Editor A code editor with no editor in it.
- Color Picker A colour picker that thinks in OKLCH, because this library does.
- Combobox Combobox — type to search, arrow to the one you want, Enter to take it.
- Date Field A date input: a field that shows the date in the page's language and opens a
Calendarto change it — anchored under the field on a desktop, in a bottom sheet on a phone, where a popover would be a thumb's width from the edge. - Date Range Field A date-range input for a dashboard's filter bar: a field that reads "Mar 3 – 9, 2026" and opens two months side by side with a rail of shortcuts — Today, Last 7 days, This month — beside them.
- Drawing Board An infinite canvas you can actually draw on: pen, shapes, arrows, text and sticky notes, with pan, zoom, selection, undo and export.
- Emoji Picker The emoji keyboard: search, categories, skin tone and a memory of what you picked last.
- Field Field — the label, the help line and the error, around any control.
- File Upload A dropzone that takes files from all three places people have them: dropped, browsed, and — the one usually missing — pasted.
- Image Cropper Crop an image by moving the image, not the box.
- Inline Edit Click the text, it becomes a field. Nothing on the page moves.
- Label A form label.
forwires it to its control, so clicking it focuses. - Number Input A number field that is a text field underneath.
- OTP Input The one-time code field.
- Phone Input A phone field that stores E.164 and lets people type a national number.
- Picker The frame a set of wheels sits in: the selection band across the middle, the fade at the top and bottom edges, and — when you give it
onconfirm— the cancel/confirm row under them. - Price Input A money field: the currency decides the symbol, which side it sits on, how many decimals are allowed and how much one step is worth.
- Rich Text Editor A rich text editor that is a
contenteditableand a toolbar, and nothing else. - Select Select — the Input's frame around a styled list of values.
- Tags Input Free-form tags, typed into one field.
- Text Field Playground Text field.
- Textarea Playground Multi-line text field.
Selection
- Checkbox Playground MD3 checkbox.
- Chip Playground MD3 chip — assist, filter, input and suggestion, in one component.
- Multi Select Several values from a list, in one field.
- Radio MD3 radio button.
- Rating Rating — a row of stars, or of any icon you give it.
- Slider Playground MD3 Expressive slider.
- Switch Playground MD3 switch.
Navigation
- Breadcrumb Breadcrumbs.
- Command Palette ⌘K — a search field over every action in the app, opened from anywhere.
- Dock The macOS dock, in Material.
- Index Scrubber The A-Z rail down the side of a long list — letters that magnify under the thumb, and a rail that condenses rather than overflowing.
- Menu MD3 menu — a list of actions hanging off a trigger.
- Navigation Bar MD3 navigation bar — the bottom bar on a phone, 3–5 destinations.
- Navigation Drawer MD3 navigation drawer — the sidebar of a dashboard, in all three of the shapes a dashboard needs it in.
- Pagination Pagination.
- Search Bar MD3 search — the bar and the view it opens into.
- Stepper Wizard progress — where you are in a checkout, an onboarding, a form too long for one screen.
- Table of Contents The “on this page” rail, with a marker that slides onto the section you are reading.
- Tabs MD3 tabs — a
TabListofTabs over oneTabPanelper tab. - Top App Bar MD3 top app bar — small, medium, large and center-aligned.
Layout
- App Shell The frame a dashboard sits in: a sidebar that stays put and one column that scrolls.
- Masonry A masonry grid — the photo wall. Cards of unequal height, packed so the bottom edge comes out level, in reading order.
- Safe Area The padding that keeps an interface out from under the hardware.
- Scroll Area A scroll container that looks like it belongs: thin, token-coloured bars that thicken under the pointer, and optional edge fades that say there is more beyond an edge — and only when there is.
- Workspace A dockable workspace: tabbed panels split any way, dragged anywhere, floated into windows, maximized, and remembered — and nothing inside them ever remounts.
Containment
- Accordion MD3 expansion panels.
- Card MD3 card — elevated, filled, or outlined.
- Carousel MD3 carousel.
- Collapsible A single disclosure: a header you press and the block it shows or hides.
- Context Menu The right-click menu.
- Device Mockup A device drawn around whatever you put on its screen.
- Dialog MD3 dialog, on the native
<dialog>element. - Divider Playground MD3 divider — a hairline that separates content without dividing the layout.
insetindents it past a leading icon or avatar so the rule lines up with the text column of a list. - Image Viewer Image viewer — tap a picture and it lifts off the page into a full-screen, zoomable, swipeable lightbox, then settles back where it came from. The feel of react-photo-view, for Svelte.
- List MD3 lists — one to three lines per row, and rows you can swipe aside for their actions.
- Popover A panel that hangs off a trigger and holds whatever you put in it — a filter form, a colour picker, a profile card, a confirmation.
- Resizable A split view whose panels you drag, with a layout it remembers.
- Share The share sheet — a bottom sheet on a phone, a centred dialog on a desktop, built on
Dialogso the focus trap, the drag-to-dismiss and the morphing height all come for free. - Sheet MD3 side and bottom sheets.
Communication
- AI Chat A conversation with a model — the thread, the streaming reply, the composer, the stop button — wired to whichever model you have.
- Alert Playground Alert — MD3's banner, for a message that belongs to the page rather than floating over it.
- Badge Playground Badge — a status pill, or the count that rides on an icon.
- Notification Center The bell in the top bar, and everything behind it.
- Progress Playground MD3 linear progress indicator.
- Spinner A small busy indicator for inline use — at the end of a row, on a chip, beside a line of text, in the corner of a card that is refetching.
- Toast One toast card.
- Tooltip MD3 tooltip — plain and rich.
- Tour A guided tour: a spotlight on one thing at a time, with a card explaining it.
Data Display
- Avatar Playground Avatar — image, initials, or icon, in that order of preference.
- Charts Twelve chart types and a sparkline, on layerchart. Opt-in — they ship behind
omaris/chart. - CodeBlock A code block: highlighted, copyable, and themed like everything else.
- Contribution Graph The activity calendar: one square per day, a year across.
- Data List Key/value details — an order's number, status and total; a profile's email, role and join date — as a real
<dl>, so a screen reader reads each label with its value rather than as two unrelated runs of text. - DiffViewer A diff, unified or side by side, with the syntax colouring the rest of the library uses.
- Empty Playground Empty state.
- Gauge Playground A radial gauge — one number against the range it lives in.
- JsonViewer A JSON tree you can actually read: collapsible, searchable, and coloured with the same
--code-*tokens asCodeBlock, so a payload in a docs page and a payload in a debug panel look like the same language. - Kanban A board of columns you drag cards between.
- Kbd A key cap — the
<kbd>a shortcut is drawn with. - LogViewer A log console: levels, filtering, search, ANSI colour, expandable rows and a tail that follows.
- Maps Declarative MapLibre: markers, clusters, routes, heatmaps, drawing and geofences. Opt-in behind
omaris/map. - QR Code A QR code, drawn as vector, encoded here.
- Skeleton Skeleton placeholder.
- Stat Card The KPI tile every dashboard opens with: a label, one number, and how that number moved.
- Status Page The page itself: one sentence at the top, and everything else under it.
- Table Data table.
- Text Playground Text — the one component every string in the app goes through, instead of a
<p>, a<span>or a<div>with a size class on it. - Timeline An activity feed or an order's history: events in order, each on a rail with a dot or an icon, joined by the line that makes them read as one sequence rather than a list of unrelated rows.
- Tree View A tree of rows you can open, close and walk with the keyboard.
- VideoPlayer A video player with its own chrome.
- Virtual List A windowed list: ten thousand rows, and only the thirty on screen exist.
Foundations
System
- PageTransition Page transitions — off unless you ask for one.
- Pull to Refresh The gesture every phone app has: drag the list down to refetch, against a rubber band, with a morphing MD3 shape for an indicator.
- Splash Screen The screen an app shows before it has anything else to show — six looks, seven indicators, eight ways to leave, and no wiring for the common case.
- Theme Settings A ready-made appearance screen for the theme store.