Components

Foundations

• Theme EnginecreateEchoTheme(seed) → { css, values, report }.
• SizeProviderOne size scale for everything with a height: sm, md and lg are the control heights (32, 44 and 60px at default density), so a button, a field and a select of the same size line up in a row.
• ScopePart of the page speaking with its own vocabulary.
• Sound EngineSoundProvider + SynthBackend.
• Motion tokensNamed motion tokens carrying duration, GSAP ease, and an explicit reduced-motion collapse, plus four springs (track, smooth, snappy, bouncy) for parts the hand can redirect mid-flight.
• useTactileBinds motion (GSAP), sound and haptics per interaction phase.
• useGsapPresenceThe GSAP exit bridge, implemented once and reused by every Base UI wrapper (Modal, Popover, Tooltip).

Buttons

• HardwareButtonA molded cap in a recessed well with real press travel and sound.
• LedKeyA molded pill key with an indicator LED that breathes while lit.
• ToggleThe quiet key of a toolbar: bold, italic, grid or list, a filter.
• ToolbarSeveral caps sharing one long well, like keys on one bar.

Forms

All 21, composed on one page: switches & sliders

• CheckboxBase UI Checkbox (keyboard, indeterminate, a11y) with a molded box skin that fills accent and shows a check when set.
• CheckboxGroupA named set of checkboxes sharing one value, the list of what's checked.
• ChoiceCardsChoosing between things that need more than a word (a plan, a template, an account): each option is a card and the whole card is the choice.
• ComboboxA Select you can type into, for a list long enough to search: people, countries, labels.
• FieldA text input sunk into a recessed well.
• DateFieldA date typed into wheels, day, month and year in the order the locale writes them, each a row of small flaps that turn over to the value.
• CalendarA month on a device screen.
• DatePickerA DateField with a calendar key in its well.
• FileUploadA recessed tray you press to choose files or drop them on; its inner edge lights while files are over it.
• FieldsetA named group of fields (a shipping address, notification settings): a legend in the section voice, an optional description, and the fields under it.
• FormA form that fails well.
• NumberFieldA machined readout between two molded step caps — and the label above it is a scrub handle you drag left and right to dial the value.
• OTP fieldThe one-time code a sign-in asks for, as a row of lit digit windows — the Field's recessed well cut into six screens, in the LCD voice.
• RadioGroupOne choice from a small set: each option is a recessed hole beside its label, and the chosen one lights a pip inside its hole.
• RangeSliderTwo knobs on one rail for a span (a price range, a time window), with the rail lit between them.
• SegmentedA hardware segmented selector — molded uppercase segments in a recessed well, the active one on the lit primary cap.
• SelectBase UI Select (typeahead, keyboard, a11y) skinned as an Echo dropdown — a molded cap trigger and a floating panel with a lit dot on the selected option.
• SliderBase UI Slider (keyboard, drag, track-press, a11y) with a recessed rail + molded knob and a scrubbing tick sound on each step — very hardware.
• SwitchBase UI Switch (role=switch, keyboard, a11y) with a hardware-toggle skin — a molded thumb sliding in a recessed track — and a click sound on toggle.
• TagsInputFree-form tags typed into Field's well: addresses, keywords, labels.
• TextareaField's recessed well, multi-line and autosizing.

Overlays

All 7, composed on one page: Overlays

• AlertDialogA destructive confirm.
• CommandThe command palette as a dot-matrix readout: the query line is the LcdChip's recessed screen well, in the LCD voice, with an emissive caret and a scanline wash.
• MenuBase UI Menu (typeahead, roving focus, submenu timing, checkbox/radio item semantics) skinned as an Echo floating panel — the Select's molded cap trigger and the same lit dot for what is on.
• ModalBase UI Dialog (focus trap, Esc, scroll-lock, a11y) skinned as an Echo device panel.
• PopoverBase UI Popover (anchoring, focus, dismiss, a11y) skinned as an Echo panel.
• SheetA molded chassis panel that slides in from an edge — the console side panel and the mobile nav.
• TooltipBase UI Tooltip (hover/focus, delay, a11y) skinned as a compact molded chip.

Navigation

All 7, composed on one page: pages & steps

• BreadcrumbWhere you are in the hierarchy, as an engraved trail.
• LinkInline text that goes somewhere.
• PaginationA row of molded number caps with the current page lit, inside a labelled nav.
• SideNavThe navigation down the side of an app: groups under machine-voice headings, items with an icon and a count, nested items that fold away (and open by themselves around the current page), and one lit rail that travels to where you are as a drop.
• StepsHow far through a sequence you are, as LED stations wired together: done stations stay lit but dim, the current one blooms, upcoming ones are dead plastic.
• TabBarA phone app's bottom navigation as a dock: a molded slab floating clear of the screen's edges, a recessed track along it, and one raised cap seated under the destination you're on.
• TabsBase UI Tabs (roving focus, arrow-key nav, a11y) marked with the library's one "you are here": a 2px lit rail slides under the open tab, over a hairline baseline.

Layout

All 11, composed on one page: tabs & accordion

• AccordionBase UI Accordion (keyboard, a11y, height measurement) skinned as molded device panels that expand.
• AppShellThe app frame: a molded chassis rail lit from the key angle, a sticky sidebar, and the content between them.
• CardA Panel with an anatomy, so every card is spaced the same way: media flush to the edges, a header (title, description, one action), a body, and a footer whose controls are sm, pinned to the bottom so a row of cards lines its actions up.
• CollapsibleOne disclosure on its own: a ruled row with a title and a chevron that opens a panel.
• DividerA panel seam — a hairline with a faint light lip.
• ItemThe row every list is made of: media to recognise it by, a title and a line under it, and what trails it.
• PanelThe two halves of the device material law as a container: raised molded plastic (things you touch) or a recessed dark screen (things you read).
• PullToRefreshA scrolling list you pull down from the top to reload: the content follows your finger with a rubber band, a molded key turns as you pull and clicks at the detent, and the list holds there with the Loader's lights until onRefresh settles.
• ScrollAreaA region that scrolls inside itself, with the scrollbar in the device's material: a thin groove and a molded thumb that fattens under the hand, and shade at an edge wherever the content continues.
• Stack & GridThe two layouts a screen is made of, with gaps on the space scale: Stack is a column or a wrapping row, Grid is as many columns as fit (minItemWidth) or a fixed number.
• WidgetGridWidgets at fixed footprints (1×1, 2×1, 2×2, 4×2) on a grid people arrange for themselves: a dashboard, a home screen, a panel of gauges.

Data display

All 11, composed on one page: badges & tags

• AvatarA person or device as a molded disc — the image seated in a well, or initials engraved into the plastic when there is no image or the image fails to load.
• BadgeA small molded/LCD status label.
• ChartStatTile's dot-matrix language applied to a series: a column per sample, cells lit from the bottom, in the same recessed screen well LcdChip and Progress use.
• CountBadgeA number worth noticing — the lit sibling of Badge.
• DescriptionListThings and their values: order details, account settings, a device's specs, a system's status at a glance.
• KbdA molded keycap for keyboard hints — a tiny cap that never presses.
• LcdChipAn inline recessed LCD readout: a glowing accent value next to a machine label, sunk into a dark well.
• ShortcutMapThe "Keyboard shortcuts" sheet a desktop app opens with ?: the list of what each shortcut does, and above it the keyboard drawn in Kbd caps.
• StatTileA recessed LCD readout: a glowing value over a machine label, seated in a dark well.
• TableRows of data in a recessed screen well.
• TagA label the user applied — a category, a person, a filter — optionally removable.

Feedback

All 10, composed on one page: progress & toasts

• BannerA persistent inline message strip.
• EmptyStateNothing here, and what to do about it.
• LoaderThree accent LEDs breathing in sequence — the device thinking.
• MeterA measurement within a known range (storage, battery, signal, a score), not a task's progress.
• NotificationCenterAn inbox of what happened: a bell key with the unread count, opening a panel of notifications as Items, newest first, each with an LED lit while unread.
• ProgressA discrete LED cell meter in a recessed strip — filled cells are lit accent LEDs with a bloom.
• SkeletonThe shape of content that has not arrived: a recess in the chassis with a slow sheen crossing it.
• StatusDotA tiny LED socket, filled and blooming or hollow and dead.
• StatusIslandWork that runs in the background, kept in one small floating slab: at rest a pill with a lit socket and a readout; pressed, it blooms open the way every Echo panel arrives, wider first and then taller, into the detail and what you can do about it.
• ToastA raised glass notification slab with a status LED, and the toaster that announces it.

Objects

• AnnunciatorThe row of fixed marks printed on a device's screen glass (REC, SYNC, MUTE, a battery), each dark until what it names is happening, then lit.
• DateTileThe page of a desk calendar: the weekday and month engraved small on a raised tile, the day huge on the screen set into it.
• EngravedPlateA paper-coloured metal plate with text cut into it and rivets at the edges — the one non-emissive readout in the library.
• FillSliderThe tall slider of a control centre: a tube in the chassis that fills with lit plastic from the bottom, like Meter's, and follows your finger anywhere on it.
• FilterTrayChunky filter pads in one long well, with the action at its end.
• JogWheelA knob with no ends: turn it and it moves a value by steps, as far as you like, like a video editor's jog wheel.
• KeypadA payment terminal's keys under its screen.
• KnobA molded rotary cap in its well with an engraved pointer and a scale that lights up to the value.
• LevelMeterA live level (a microphone, a mix bus) as LED cells with real ballistics: it rises at once, falls back slowly, and holds its peak for a moment.
• NowPlayingA small player: a screen with where it's from, what's playing and the time in lit segments, a strip to scrub along, and the transport keys under it, play the lit one.
• PatchBayConnecting things to things, the way a studio patches its gear: sockets down one side for what you have, sockets down the other for where it goes, and a cable between each connected pair.
• QuickTileA quick-settings tile, as in a phone's control centre: a big molded key with a glyph, a name and a line of state.
• ReceiptThe device prints: a summary feeds out of a slot in the chassis a line at a time, each with a small tick, in dark ink on the paper colour, and waits to be torn off.
• SegmentDisplayA seven-segment readout drawn the way a real one looks: the segments a reading doesn't light stay faintly visible under the glass, and zeros that only pad a reading out print dim instead of vanishing.
• SwitchBankSettings that come in a grid (notifications by event and channel, permissions by role and resource, a schedule by day) as a bank of Switches in a Table, one where each row meets each column.
• TicketA paper pass: what it's for on the main part, the code on a stub across a perforation.
• TunerA number picked the way a radio is tuned: a scale printed on the screen slides under a fixed, lit needle, and a seven-segment reading follows it.
• WeekStripA week you tap through, the way the top of a phone's calendar works: seven days in a Segmented, each with its weekday and date, the chosen one lit, the light travelling there as a drop.

Motion

All 18, composed on one page: the gallery

• ActionFanOne action opens into its choices, which bud from it one after another; the × folds them back.
• AddToBagPress it and a drop buds out of the button and lands in the count beside it, which swells and goes up — the eye follows the thing you added to where it went.
• ConfirmButtonA destructive action that asks for its second press where the hand already is.
• DoneButton"Mark as done" divides into a lit "Done" and an "Undo".
• HoldButtonConfirm by holding: the primary plastic fills the cap while you press, drains if you let go early, and the action happens when it's full.
• LightSourceYour pointer becomes the light the caps inside it are lit by: each HardwareButton's shine turns toward it and its shadow falls away from it, the nearest most.
• MagneticThe HardwareButtons inside it feel your hand before you touch them: each leans toward the pointer and comes up a little, the nearest most, and springs home when you move away.
• MorphWrap your own HardwareButtons and render whatever state you like: when the buttons inside change, the old ones flow into the new ones as one liquid body.
• PullCordA switch you pull.
• RippleA surface of dots that answers a press like water: a wave runs out from where you pressed, and pressing longer presses deeper and sends a bigger one.
• SaveButtonThe button becomes its own progress, then its own answer: Save narrows into a busy cap while your save runs, widens into a lit Saved, and flows back.
• SplitFlapA readout that turns over like a departures board: each character flips through the ones between where it is and where it's going, flap by flap — fast when it's far, slowest on the last one — and each flap ticks.
• StopwatchStart becomes the running time (lit) and a Lap button beside it; each lap is a drop that leaves Lap and lands in the lap count.
• ThrowStackA stack of cards you can throw: drag the top one and flick it, and it keeps the speed you gave it, spins from where you held it (grabbed low, it swings the other way), flies off and tucks back in underneath.
• TimerA timer that is one button.
• useBudOffA drop of the primary plastic buds out of one element, flies to another and is swallowed by it, which swells as it lands — so the eye follows cause to effect.
• useRollA readout that rolls to a new value instead of swapping it: each digit steps through the ones in between, all together, fast when it's far and slowest on the last step.
• VoiceNoteRecord a voice note in one button.

Creature

• CreatureA small companion that lives in the interface and only reports what's happening: idle, busy, done, an error, asleep.
• PerchA creature on the top edge of whatever you put in it: sitting there watching, or hiding behind the edge and peeking up when you come near.

Texture

All 2, composed on one page: Texture

• ShaderFieldThe live brand field: a WebGL domain-warped fbm gradient sampled from the accent ramp, blooming toward the cursor, with animated grain and TPDF debanding.
• TexturesThe grain law as composable overlays: Dither (ordered Bayer), Noise (film grain), Halftone, Scanlines, plus GrainField (the brand surface) and Textured (the default stack).

Templates

All 2, composed on one page: every template, side by side

• Chat screenOne conversation as a front panel: an Avatar and StatusDot header, a message log, a Loader typing indicator, and a Textarea composer with one lit Send cap.
• Console screenA device dashboard as a front panel: AppShell, six StatTile readouts, an LED level matrix in a Panel, status lights, a takes Table and Pagination.