Browse Components

Avatar

<quiet-avatar>

Provides a visual representation of a user to enhance personalization and recognition.

Badge

<quiet-badge>

Displays useful information or notifications such as a new feature or an unread message count.

Breadcrumb

<quiet-breadcrumb>

Offers a trail of links that correspond to an app or website's hierarchy, making navigation more predictable for users.

Breadcrumb Item

<quiet-breadcrumb-item>

Represents a single link or step in the hierarchical structure of an app or website.

Browser Frame

<quiet-browser-frame>

An on-page browser UI that displays arbitrary content inside of it.

Button

<quiet-button>

Allows users to navigate, submit forms, and perform other actions.

Button Group

<quiet-button-group>

Displays related buttons in a stylized group.

Bytes

<quiet-bytes>

Formats an arbitrary number of bytes or bits into a human-readable size.

Callout

<quiet-callout>

Draws attention to important information, provides context, or prompts users to take action.

Card

<quiet-card>

Provides a flexible and visually appealing way to organize and present content in a consistent and easily digestible format.

Carousel

<quiet-carousel>

Displays content in a scrollable horizontal slider with navigation controls.

Carousel Item

<quiet-carousel-item>

Represents individual items used in a carousel.

Checkbox

<quiet-checkbox>

Allows users to select one or more options from a list or toggle single options on and off.

Checkbox Group

<quiet-checkbox-group>

Attaches a label and description to a group of related checkboxes or switches.

Color Input

<quiet-color-input>

Allows users to enter or select a color and submit it with a form.

Color Picker

<quiet-color-picker>

Provides a customizable interface for selecting a color.

Comparison

<quiet-comparison>

Displays two elements side-by-side with a draggable divider, allowing users to adjust the visible portions for direct visual comparison.

Copy

<quiet-copy>

Copies text and other types of data to the clipboard.

Countdown

<quiet-countdown>

Displays a countdown until the specified date.

Date

<quiet-date>

Outputs a date or time in the specified format.

Dialog

<quiet-dialog>

Displays modal content for alerts, confirmations, configurations, and other important interactions that require immediate attention.

Divider

<quiet-divider>

Separates and groups content visually.

Dropdown

<quiet-dropdown>

Provides a menu of options that appear when the corresponding trigger is activated.

Dropdown Item

<quiet-dropdown-item>

Can be selected from inside a dropdown menu.

Empty State

<quiet-empty-state>

Guides users during first-time experiences or when content is missing, transforming blank spaces into opportunities with helpful visuals and clear actions.

Expander

<quiet-expander>

An expandable content container with smooth animation on show/hide.

File Input

<quiet-file-input>

Allows the user to select files to upload to the server.

Fit Text

<quiet-fit-text>

Scales a line of text to fit within its container.

Flip Card

<quiet-flip-card>

Displays information on two sides, allowing users to flip between the front and back with the click of a button.

Hotkey

<quiet-hotkey>

Shows keyboard shortcut combinations based on the user's operating system.

Icon

<quiet-icon>

Provides a visual representation of an object, action, or idea.

Include

<quiet-include>

Pulls content from another file into your page.

Infinite Scroller

<quiet-infinite-scroller>

Provides an accessible container for continuously loading content feeds.

Intersection Observer

<quiet-intersection-observer>

Watches child elements and dispatches events when they intersect with their root element.

Joystick

<quiet-joystick>

A directional joystick that can be controlled via touch or mouse.

Listbox

<quiet-listbox>

Displays a list of options, allowing users to select one or more items from the available choices.

Listbox Item

<quiet-listbox-item>

Represents individual choices within a listbox.

Lorem Ipsum

<quiet-lorem-ipsum>

Outputs placeholder text in various formats for testing designs with random content.

Mutation Observer

<quiet-mutation-observer>

Watches child elements and dispatches an event when they mutate.

Number

<quiet-number>

Outputs a number in the specified format.

Number Field

<quiet-number-field>

Allows users to input and edit numbers.

Number Ticker

<quiet-number-ticker>

Animates a number from a starting value to an ending value.

Pagination

<quiet-pagination>

Splits content into numbered pages so users can navigate datasets in manageable chunks.

Passcode

<quiet-passcode>

Allows users to enter fixed-length passcodes, verification tokens, one-time codes, and similar data in a user-friendly way.

Popover

<quiet-popover>

Provides additional information or functionality without interrupting the flow of content.

Progress

<quiet-progress>

Visually represents the progress of a request or task.

QR

<quiet-qr>

Generates a QR Code with embedded data.

Radio

<quiet-radio>

Allows the user to select one option from a group of choices.

Radio Item

<quiet-radio-item>

Represents individual choices within a radio.

Rating

<quiet-rating>

Allows users to provide feedback based on their satisfaction with a product or service.

Relative Time

<quiet-relative-time>

Outputs a relative time in a human-readable format.

Resize Observer

<quiet-resize-observer>

Watches child elements and dispatches an event when they resize.

Scroller

<quiet-scroller>

Adds an accessible container with visual affordances to help users identify and navigate scrolling content.

Search List

<quiet-search-list>

Queries a collection of items based on their content and keywords.

Select

<quiet-select>

Allows users to choose an option from a predefined list of options.

Share

<quiet-share>

Allows users to share links, files and text via their operating system's share interface.

Slide Activator

<quiet-slide-activator>

Gives users a draggable thumb that must be moved to the end of its track to trigger an action.

Slider

<quiet-slider>

Allows users to select numeric values within a given range by moving a thumb along a track.

Sparkline

<quiet-sparkline>

Shows at-a-glance trends in a small, inline chart that fits within text or tables.

Spinner

<quiet-spinner>

Tells the user that content is loading or a request is processing in the background.

Splitter

<quiet-splitter>

A draggable splitter that separates two panels, allowing users to resize them.

Spoiler

<quiet-spoiler>

Conceals sensitive content and gives the user the option of showing it or not, preventing unintentional disclosure.

Stamp

<quiet-stamp>

Renders templates with simple expressions, logic, and custom data.

Switch

<quiet-switch>

Allows the user to toggle between two mutually exclusive states, such as on and off.

Tab

<quiet-tab>

Describes and selects a tab panel within a tab list.

Tab List

<quiet-tab-list>

Allows users to switch between different sections of content without leaving the page, providing a clean and organized interface.

Tab Panel

<quiet-tab-panel>

Holds the content that gets displayed when a tab is selected.

Text Area

<quiet-text-area>

Allows users to edit multi-line, plain text content.

Text Field

<quiet-text-field>

Allows users to input and edit text.

Text Mask

<quiet-text-mask>

Applies text as a mask over an image, creating visually stylized characters.

Timed Content

<quiet-timed-content>

Shows certain content based on the current date and time.

Toast

<quiet-toast>

A mechanism for showing temporary, non-intrusive notifications that appear above the page's content.

Toast Item

<quiet-toast-item>

Notifications displayed by the toast component.

Toggle Icon

<quiet-toggle-icon>

Similar to checkboxes, except with icons to represent the checked and unchecked states.

Toolbar

<quiet-toolbar>

Turns a collection of buttons and button groups into an accessible toolbar.

Tooltip

<quiet-tooltip>

Provides additional information when the user hovers or focuses on an element.

Transition Group

<quiet-transition-group>

Improves the user's experience by adding subtle animations as items are added, removed, and reordered in the group.

Typewriter

<quiet-typewriter>

Simulates a natural typing effect with customizable speed, delay, and looping options.

Veil

<quiet-veil>

Covers elements visually and disables interaction during important states such as submitting or loading.

Zoomable Frame

<quiet-zoomable-frame>

Renders iframe content with zoom and interaction controls.