App-level pieces the apps shared copies of.
29 components
- Accent toggle The accent presets: a swatch strip on desktop, labelled rows on phones.
- Auth shell Centered sign-in layout: heading, optional brand and footer.
- Bottom nav The phone tab bar: top-level destinations, the current one lit.
- Command palette A ⌘K search over pages and actions: a dialog on desktop, a tall drawer on phones.
- Copy field Monospace value with a copy button and a promise toast.
- Document title The tab's <title> from the page title, suffixed with the app.
- Empty state Icon, title, subtitle and an action for an empty list.
- Error page Status, message and error id, with a link back home.
- Fab Floating action button above the phone tab bar, with a haptic tap.
- Icon button Round icon button whose tooltip is its accessible name.
- Install prompt One-time PWA install sheet: native prompt or the steps.
- Music player An audio player bar with a queue: play, skip, seek and volume.
- Nav cards Phone-only list of a section's tabs as cards.
- New password fields New password with a reveal button, a strength meter and the rules it must pass.
- Option group Radio cards for a settings choice, each with an icon or swatch.
- Otp field A one-time code: digits only, autofilled from SMS, posted as one field.
- Password input A password field with a button to reveal what was typed.
- Responsive sheet A dialog on desktop, a bottom drawer on phones.
- Setting switch Labelled switch row for settings forms.
- Stat card Glass card with an icon, a value and a hint, optionally a link.
- Stepper A multi-step flow: labelled markers on desktop, a progress bar and the current step on phones.
- Tab nav Pill tab bar of links, the current page's tab highlighted.
- Tab section Tabbed section layout: tabs on desktop, nav cards on phones.
- Theme picker System, light and dark as radio cards.
- Theme toggle System, light and dark: an icon strip on desktop, three rows on phones.
- Time range picker Time range presets, plus a custom range in a calendar popover or a phone drawer.
- Time series chart Line, area or bar chart over time: axes, readout, touch scrubbing and a data table.
- Top loading bar Progress bar during SvelteKit navigations.
- Video player A video player: scrubbing, chapters, subtitles, speed, fullscreen, gestures and shortcuts.