Browse Components

Accordion

<quiet-accordion>

Groups collapsible sections so only the content the user cares about is visible at a time. Use an accordion for FAQs, settings panels, and long-form content that benefits from being broken into scannable sections.

Accordion Item

<quiet-accordion-item>

Represents a single collapsible section inside an accordion, with a header that toggles its content open and closed. Use one accordion item per topic, question, or panel you want the user to expand on demand.

Aura

<quiet-aura>

Extracts the dominant colors from an image and exposes them as CSS custom properties on the host. Use an aura to tint backgrounds, glows, and text around album art, hero images, and product shots so the surrounding UI feels connected to the picture.

Avatar

<quiet-avatar>

Displays a photo, initials, or icon that identifies a person or account. Use an avatar in comment threads, member lists, chat messages, and profile headers so users can recognize each other at a glance.

Badge

<quiet-badge>

Displays a small label for counts, statuses, or short notifications attached to another element. Use a badge to highlight unread messages, flag new features, or mark items that need attention.

Breadcrumb

<quiet-breadcrumb>

Shows a trail of links that reflects the user's location within a site or app hierarchy. Use breadcrumbs on deep pages such as documentation, product catalogs, and file browsers to help users orient themselves and jump back to parent sections.

Breadcrumb Item

<quiet-breadcrumb-item>

Represents one link or step inside a breadcrumb trail. Use a breadcrumb item for each ancestor page in the path, marking the final item as the current location.

Browser Frame

<quiet-browser-frame>

Wraps content in a stylized browser window chrome complete with an address bar and window controls. Use a browser frame to present screenshots, live demos, and marketing visuals as if they were running in a real browser.

Button

<quiet-button>

Triggers actions such as submitting forms, opening menus, and navigating between pages. Reach for a button whenever the user needs to initiate an action with a single click or tap.

Button Group

<quiet-button-group>

Joins related buttons into a single visually connected cluster. Use a button group for view toggles, text alignment controls, pagination, and toolbars where the actions belong together.

Bytes

<quiet-bytes>

Formats a raw byte or bit count into a localized, human-readable size such as "2.4 MB" or "980 Kbit". Use it to display file sizes, upload limits, and bandwidth figures without hand-rolling unit conversions.

Callout

<quiet-callout>

Highlights a block of information inline with the surrounding content using a colored variant and optional icon. Use a callout for tips, warnings, deprecation notices, and success messages that belong in the flow of the page rather than in a dismissible toast or modal.

Card

<quiet-card>

Groups related content into a bordered container with optional header, footer, and action areas. Use a card for product tiles, article previews, dashboard widgets, and anything else that should read as a self-contained unit in a list or grid.

Carousel

<quiet-carousel>

Displays a horizontal slider of content that users swipe, scroll, or step through with navigation controls. Use a carousel to showcase featured items, product images, or testimonials when space is limited and strict ordering is not required.

Carousel Item

<quiet-carousel-item>

Represents a single slide inside a carousel. Use one carousel item per image, testimonial, product, or panel you want the carousel to rotate through.

Chart

<quiet-chart>

Renders bar, line, pie, radar, and other chart types on a canvas with themed defaults built on Chart.js. Use a chart to visualize dashboards, reports, and analytics while still having full access to the underlying Chart.js instance for advanced customization.

Checkbox

<quiet-checkbox>

Captures a boolean or multi-select choice and integrates with native forms, including an indeterminate state. Use a checkbox for terms agreements, feature opt-ins, and any list where users may pick more than one option.

Checkbox Group

<quiet-checkbox-group>

Wraps a set of related checkboxes or switches with a shared label, description, and validation message. Use a checkbox group for interest pickers, permission lists, and filter panels so the controls read as a single field.

Color Input

<quiet-color-input>

Collects a color value using a popup color picker and submits it with native forms. Use a color input for theme customizers, design tools, and any form field that needs to capture a hex, RGB, or HSL color, with optional alpha, swatches, and eye dropper support.

Color Picker

<quiet-color-picker>

Presents a full color selection interface with a saturation area, hue and alpha sliders, numeric inputs, swatches, and an optional eye dropper. Reach for it as a primitive when building custom design tools; use a color input instead when the value needs to participate in form submission.

Combobox

<quiet-combobox>

Combines a text field with a filterable list of options, letting users type to search or pick from the menu and submit the value with a form. Use a combobox for country pickers, tag selectors, and any long list where type-ahead is faster than scrolling.

Combobox Item

<quiet-combobox-item>

Represents a single selectable option inside a combobox. Use one combobox item per value you want users to search for and pick from the list.

Comparison

<quiet-comparison>

Places two elements side by side with a draggable divider that reveals more or less of each. Use a comparison to show before and after photos, design iterations, or any pair of visuals users need to weigh against each other.

Copy

<quiet-copy>

Copies text or other data to the clipboard when its button is activated. Use a copy control next to URLs, API keys, coupon codes, and code snippets so users can grab the value without selecting it by hand.

Counter

<quiet-counter>

Counts up or down to a specified date, automatically ticking through years, months, days, and smaller units. Use a counter for product launch countdowns, sale timers, event start times, or to show how long ago something happened.

Date

<quiet-date>

Formats a date or time for display using the user's locale and your chosen format options. Reach for a date whenever you need to show timestamps, published dates, or deadlines consistently across languages and regions.

Dialog

<quiet-dialog>

Displays modal content in a layer above the page for alerts, confirmations, and focused tasks. Use a dialog when the user must respond to or acknowledge something before returning to the rest of the interface.

Divider

<quiet-divider>

Draws a horizontal or vertical line, optionally with a centered symbol, to separate sections of content. Use a divider between list items, form groups, or toolbar sections when whitespace alone is not enough to show where one region ends and another begins.

Dropdown

<quiet-dropdown>

Reveals a non-modal menu of actions when its trigger is activated. Use a dropdown to group related commands behind a single button, keeping toolbars and headers from feeling crowded.

Dropdown Item

<quiet-dropdown-item>

Represents a selectable command, link, or toggle inside a dropdown menu, with optional icons, details, and nested submenus. Use dropdown items to populate the menu with actions the user can pick from.

Empty State

<quiet-empty-state>

Replaces an empty area with a friendly message, illustration, and clear next step. Use an empty state when a list, search result, or dashboard has no content yet, turning a confusing blank space into a helpful starting point.

Expander

<quiet-expander>

Reveals or collapses a region of content with a smooth height animation when toggled. Use an expander for long articles, optional details, and read-more sections where you want to keep the initial view short without hiding content entirely.

File Input

<quiet-file-input>

Lets users pick one or more files from their device and integrates with native forms for upload. Use a file input for avatars, attachments, document uploads, and any workflow that needs files submitted alongside other form data.

Fit Text

<quiet-fit-text>

Resizes a line of text so it fills the width of its container without wrapping or overflowing. Use fit text for hero headlines, poster-style layouts, and responsive display type that needs to stay on a single line.

Flip Card

<quiet-flip-card>

Presents two sides of content that rotate with a 3D flip animation. Use a flip card when related information splits naturally into a summary and detail view, such as a profile and its edit form or a question and its answer.

Hotkey

<quiet-hotkey>

Displays a keyboard shortcut using the right modifier symbols for the user's operating system, swapping command for control on Windows and Linux automatically. Use a hotkey inside menu items, tooltips, and help panels so users see the correct keys for their platform.

Icon

<quiet-icon>

Renders an SVG icon from a configurable icon library. Use icons to reinforce labels, communicate status, and convey meaning at a glance in buttons, menus, and form fields.

Identicon

<quiet-identicon>

Generates a deterministic pixel-art pattern from any string, producing the same image every time for the same input. Use an identicon as a fallback avatar for users without profile photos, or to visually distinguish accounts, commits, and API keys at a glance.

Include

<quiet-include>

Fetches HTML from a URL and injects it into the page at runtime. Use an include to pull in shared headers, footers, navigation, and other partials without a build step or server-side templating.

Infinite Scroller

<quiet-infinite-scroller>

Loads more items automatically as the user nears the end of a feed, following the ARIA feed pattern for accessibility. Use an infinite scroller for social timelines, search results, and activity streams where paging controls would interrupt the flow.

Intersection Observer

<quiet-intersection-observer>

Watches its child elements and fires events as they enter or leave the viewport, wrapping the native IntersectionObserver API in declarative markup. Use it to trigger scroll-based animations, lazy-load media, or fire analytics when sections come into view.

Joystick

<quiet-joystick>

Provides a draggable thumbstick that reports angle, distance, and x/y coordinates as the user moves it with touch or a mouse. Use a joystick for directional input in games, robot and drone controls, camera panning, and other creative tools where a pair of sliders would feel clumsy.

Listbox

<quiet-listbox>

Presents a scrollable list of options for single or multiple selection with full keyboard navigation and native form integration. Use a listbox when users need to see several choices at once, such as picking tags, assigning roles, or filtering a dataset.

Listbox Item

<quiet-listbox-item>

Represents a single selectable option inside a listbox, with support for icons, disabled state, and a value for form submission. Use listbox items to populate a listbox with the choices a user can select.

Lorem Ipsum

<quiet-lorem-ipsum>

Generates placeholder text as words, sentences, paragraphs, or list items, with an optional seed for reproducible output. Reach for lorem ipsum when mocking up layouts, stress-testing typography, and filling prototypes before real copy is ready.

Match Media

<quiet-match-media>

Renders its default slot when a CSS media query matches and a fallback slot when it does not, reacting live as conditions change. Use it to swap content based on viewport size, color scheme, reduced motion, or any other media feature without writing JavaScript.

Math

<quiet-math>

Renders LaTeX mathematical expressions as MathML for accessible, high-quality typesetting in the browser. Use a math element to display equations, formulas, and scientific notation inline with the rest of your content.

Mesh Gradient

<quiet-mesh-gradient>

Generates a colorful, organic mesh gradient from a single base color. Reach for a mesh gradient when you need a rich background for hero sections, cards, or empty states without shipping a static image.

Monster

<quiet-monster>

Generates a deterministic pixel monster from any input string, producing the same creature every time. Use monsters as fun, unique placeholder avatars for users, comments, or profiles that lack a real picture.

Mutation Observer

<quiet-mutation-observer>

Watches slotted child elements for DOM changes and dispatches an event whenever a mutation occurs. Use a mutation observer to react declaratively to attribute changes, added or removed nodes, and text updates in markup.

Navicon

<quiet-navicon>

Toggles between a hamburger and close icon with a smooth animation to control navigation menus. Use a navicon in mobile headers and collapsible sidebars to show or hide the primary navigation with a single tap.

Number

<quiet-number>

Formats a number for the user's locale, with support for currencies, percentages, and units of measure. Use a number element to display prices, statistics, and measurements without hand-writing formatting logic.

Number Field

<quiet-number-field>

Collects a numeric value with stepper buttons, min and max bounds, and native form integration. Use a number field for quantities, ages, prices, and any input where the value must fall within a specific range.

Number Ticker

<quiet-number-ticker>

Animates a number counting up or down to an ending value when it scrolls into view. Use a number ticker to draw attention to statistics, metrics, and milestones on landing pages, dashboards, and marketing sites.

Pagination

<quiet-pagination>

Presents numbered page buttons with previous and next controls for navigating long lists of results. Use pagination for search results, tables, archives, and any dataset that's too large to show on a single page.

Passcode

<quiet-passcode>

Captures a fixed-length code across individual character boxes with auto-advancing focus and paste support. Use a passcode field for one-time codes, two-factor verification, PINs, and short confirmation tokens.

Popover

<quiet-popover>

Anchors a non-modal panel to a trigger element, revealing extra detail without taking over the page. Use a popover for help text, previews, and supplemental content that's too long for a tooltip but shouldn't block the UI.

Progress

<quiet-progress>

Shows how far along a task is with either a horizontal bar or a circular ring, including indeterminate states. Use progress for file uploads, form steps, loading sequences, and any operation with a measurable duration.

QR

<quiet-qr>

Generates a scannable QR code from a string of data such as a URL, email address, or plain text. Use a QR code to bridge print and digital, share Wi-Fi credentials, or let users jump from one device to another quickly.

Radio

<quiet-radio>

Groups radio items together so the user can pick exactly one option, with full native form integration. Use a radio group for mutually exclusive choices such as shipping methods, plan tiers, and survey answers.

Radio Item

<quiet-radio-item>

Represents a single selectable choice inside a radio group. Use radio items to list the available options whenever you build a radio, pairing each one with a clear label the user can click or tap to make their selection.

Random Content

<quiet-random-content>

Randomly picks and displays one or more items from a pool of slotted children. Use random content to rotate testimonials, surface featured products, show tips of the day, or add variety to static pages.

Rating

<quiet-rating>

Collects a star rating from the user with support for half-steps, custom icons, and native form submission. Use a rating to gather feedback on products, reviews, courses, and any experience measured on a fixed scale.

Relative Time

<quiet-relative-time>

Displays a date as a human-readable relative phrase such as "3 minutes ago" and updates itself as time passes. Use relative time for comments, activity feeds, and notifications where recency matters more than the exact date.

Resize Observer

<quiet-resize-observer>

Watches slotted child elements for size changes and dispatches an event whenever their dimensions shift. Use a resize observer to build container-aware layouts, responsive charts, and components that adapt to their box.

Scroller

<quiet-scroller>

Wraps overflowing content in an accessible, keyboard-navigable container with shadow hints that signal more content lies offscreen. Use a scroller for wide tables, long code blocks, or horizontal card rails that need to fit inside a constrained layout without losing discoverability.

Search List

<quiet-search-list>

Filters a collection of items in real time as the user types, with exact or fuzzy matching and custom keyword support. Reach for a search list when you need client-side filtering over cards, contacts, FAQs, or any list where users should find something quickly without a round trip to the server.

Select

<quiet-select>

Presents a dropdown of predefined options and integrates with native forms. Use a select for country pickers, category filters, and any single-choice field where the list of values is known ahead of time.

Share

<quiet-share>

Opens the operating system's native share sheet so users can send links, files, and text to the apps they already use. Use a share button on articles, products, and media pages where readers expect to forward content to friends or other apps on their device.

Signature

<quiet-signature>

Captures a handwritten or typed signature and exposes it for form submission. Use a signature field for consent forms, delivery confirmations, agreements, and any workflow where a name needs to be signed.

Slide Activator

<quiet-slide-activator>

Requires the user to drag a thumb across a track before firing an action, then locks until reset programmatically. Use a slide activator for high-stakes confirmations like placing orders, unlocking devices, or starting irreversible operations where an accidental tap would be costly.

Slider

<quiet-slider>

Picks a numeric value from a range by dragging a thumb along a track, with optional markers, tooltips, and native form integration. Use a slider for volume, brightness, price filters, and any setting where the approximate value matters more than typing an exact number.

Sortable

<quiet-sortable>

Turns a group of child elements into a drag-and-drop list that users can reorder with a pointer, touch, or the keyboard. Use a sortable for todo lists, playlist queues, kanban columns, and any collection whose order the user should control directly.

Sparkline

<quiet-sparkline>

Renders a compact, label-free chart that communicates a trend at a glance inside text, cards, or table cells. Use a sparkline for stock tickers, analytics dashboards, and KPI tiles where readers need the shape of the data without the overhead of a full chart.

Spinner

<quiet-spinner>

Displays an animated indicator that signals a task is in progress without revealing how long it will take. Use a spinner while fetching data, submitting forms, or waiting on any short operation where progress cannot be measured precisely.

Splitter

<quiet-splitter>

Divides two panels with a draggable handle so users can resize them horizontally or vertically. Use a splitter for code editors, file managers, chat sidebars, and any layout where people need to balance the space between two regions on the fly.

Spoiler

<quiet-spoiler>

Hides content behind a blurred overlay that the user can reveal on demand. Use a spoiler for plot twists, sensitive imagery, or information the reader should opt into seeing.

Stamp

<quiet-stamp>

Stamps out repetitive HTML from a single template element using curly brace expressions, conditionals, and loops driven by data attributes or JSON. Reach for a stamp when you want to render user cards, product tiles, or list items from a shared pattern without writing a framework or copying markup.

Switch

<quiet-switch>

Toggles a setting between on and off with an immediate effect, serialized for form submission. Use a switch for preferences like notifications, dark mode, and airplane mode where the change applies right away and does not need a separate save step.

Tab

<quiet-tab>

Labels and activates a panel inside a tab list. Use a tab for each section a user can switch between, such as account settings, product details, or documentation chapters.

Tab List

<quiet-tab-list>

Groups related tabs and their panels so users can switch between sections of content in place. Use a tab list for settings screens, product spec sheets, and dashboards where several peer views share the same area.

Tab Panel

<quiet-tab-panel>

Holds the content shown when its matching tab is active inside a tab list. Use a tab panel to wrap the markup for each section, from forms and tables to entire sub-views, so it shows and hides in sync with selection.

Tag Input

<quiet-tag-input>

Collects a list of short values as removable chips that users add by typing and pressing Enter, serialized for form submission. Use a tag input for keywords, email recipients, skills, and labels where the number of entries is open-ended and each value needs to stand on its own.

Term

<quiet-term>

Renders a localized string declaratively in HTML, with support for pluralization and interpolated data. Use a term to drop translated labels, counts, and messages directly into markup without wiring up JavaScript on every page.

Text Area

<quiet-text-area>

Collects multi-line, plain text from the user and integrates with native forms. Use a text area for comments, bio fields, product reviews, and any free-form input where a single line is not enough room.

Text Field

<quiet-text-field>

Collects a single line of text from the user and integrates with native forms. Use a text field for names, emails, URLs, search queries, and any short free-form input.

Text Mask

<quiet-text-mask>

Clips an image to the shape of its own text so the letters reveal the picture beneath. Use a text mask for eye-catching landing page headlines and hero sections, paired with a heavy font weight so the image has enough letter surface to show through.

Text Reveal

<quiet-text-reveal>

Animates text into view one character at a time using effects like fade, blur, flip, and slide. Use a text reveal to add a polished entrance to headings, hero copy, callouts, and other short passages.

Timed Content

<quiet-timed-content>

Shows or hides content based on the current date and time, with slots for before and after windows. Use timed content for seasonal promotions, scheduled announcements, event countdowns, and limited-time offers.

Timeline

<quiet-timeline>

Displays a sequence of events, steps, or milestones connected by bullets and lines to show progression. Use a timeline for order tracking, project roadmaps, activity feeds, and step-by-step history views.

Timeline Item

<quiet-timeline-item>

Represents a single step, event, or milestone inside a timeline, with a customizable bullet slot. Use timeline items to describe each stage of a process and swap in icons, avatars, or spinners as bullets.

Toast

<quiet-toast>

Dispatches temporary, non-intrusive notifications into a stack that renders in the browser's top layer. Place a single toast element on the page and call its create() method to show confirmations, alerts, and status updates without interrupting the user's flow.

Toast Item

<quiet-toast-item>

Represents a single notification shown by the toast component, with variants, an icon slot, and duration. Create toast items on the fly through the toast's create() method, or declare them inside a template for reuse.

Toggle Icon

<quiet-toggle-icon>

Works like a checkbox but uses icons to represent the checked and unchecked states, with native form integration. Use a toggle icon for favoriting, starring, liking, bookmarking, and other on/off actions where an icon communicates the state more clearly than a box.

Toggle Tag

<quiet-toggle-tag>

Works like a checkbox but renders as a tag-shaped pill that reflects its checked state, with native form integration. Use toggle tags inside a checkbox group to select amenities, filters, categories, and other multi-select options in a compact, touch-friendly layout.

Toolbar

<quiet-toolbar>

Turns a collection of buttons and button groups into an accessible toolbar with roving tab index and arrow key navigation. Use a toolbar to collapse many related actions behind a single tab stop, such as rich text formatting controls or editor command sets.

Tooltip

<quiet-tooltip>

Shows brief, contextual information when the user hovers over or focuses an element. Use tooltips to explain icon buttons, clarify abbreviated labels, or surface shortcuts without cluttering the interface.

Transition Group

<quiet-transition-group>

Animates child elements smoothly as they are added, removed, and reordered in the DOM. Wrap a list, grid, or stack in a transition group when you want insertions, deletions, and shuffles to feel fluid instead of jumping into place.

Tree

<quiet-tree>

Displays hierarchical data as an expandable, selectable tree. Use a tree for file explorers, nested navigation, org charts, and any data with parent-child relationships.

Tree Item

<quiet-tree-item>

Represents a single node in a tree view that can contain nested children, an icon, and a custom expand indicator. Nest tree items inside a tree to build folder structures, navigation menus, and other hierarchical layouts.

Truncate

<quiet-truncate>

Shortens a line of text with an ellipsis placed at the start, center, or end when it overflows its container. Reach for truncation on long filenames, URLs, and identifiers where both ends of the string carry meaning and plain CSS text-overflow would hide the wrong part.

Typewriter

<quiet-typewriter>

Types out text one character at a time with configurable speed, delay, looping, and a natural mode that pauses after punctuation. Use a typewriter for hero headlines, chat simulations, code demos, and intros where you want the words to arrive with rhythm.

Underline

<quiet-underline>

Draws a decorative SVG underline beneath inline text, with styles like arcs, waves, and gradients that CSS text-decoration can't produce. Use an underline to highlight key phrases in marketing copy, hero sections, and landing pages; it works best on short, single-line content.

Veil

<quiet-veil>

Covers its contents with a blurred overlay and blocks interaction while showing an optional spinner. Activate a veil over forms, cards, or entire sections during submission, loading, and other transient states where the user should wait before interacting again.

Zoomable Frame

<quiet-zoomable-frame>

Embeds a URL or inline HTML in an iframe with built-in zoom controls and a configurable aspect ratio. Use a zoomable frame to preview external sites, showcase responsive layouts, and display design mockups at a scaled-down size without sacrificing interactivity.