Browse Components

Avatar

<quiet-avatar>

Avatars provide a visual representation of a user to enhance personalization and recognition.

Badge

<quiet-badge>

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

Breadcrumb

<quiet-breadcrumb>

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

Breadcrumb Item

<quiet-breadcrumb-item>

Breadcrumb items represent 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>

Buttons allow users to navigate, submit forms, and perform other actions.

Button Group

<quiet-button-group>

Button groups display 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>

Callouts draw attention to important information, provide context, or prompt users to take action.

Card

<quiet-card>

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

Checkbox

<quiet-checkbox>

Checkboxes let users select one or more options from a list or toggle single options on and off.

Checkbox Group

<quiet-checkbox-group>

Checkbox groups let you attach a label and description to a group of related checkboxes or switches.

Color Input

<quiet-color-input>

Color inputs let users enter or select a color and submit it with a form.

Color Picker

<quiet-color-picker>

Color picker provides a customizable interface for selecting a color using a two-dimensional slider for luminosity and saturation and standard sliders for hue and opacity.

Copy

<quiet-copy>

Copy buttons let you copy 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>

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

Divider

<quiet-divider>

Dividers separate and group content visually.

Dropdown

<quiet-dropdown>

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

Dropdown Item

<quiet-dropdown-item>

Dropdown items can be selected from inside a dropdown menu.

Empty State

<quiet-empty-state>

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

File Input

<quiet-file-input>

File inputs let the user 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>

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

Hotkey

<quiet-hotkey>

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

Icon

<quiet-icon>

Icons provide a visual representation of an object, action, or idea.

Include

<quiet-include>

Includes let you pull content from another file into your page.

Joystick

<quiet-joystick>

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

Listbox

<quiet-listbox>

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

Listbox Item

<quiet-listbox-item>

Listbox items represent individual choices within a listbox.

Lorem Ipsum

<quiet-lorem-ipsum>

Outputs placeholder text for testing designs with random content.

Number

<quiet-number>

Outputs a number in the specified format.

Number Ticker

<quiet-number-ticker>

Number tickers animate a number from a starting value to an ending value.

Passcode

<quiet-passcode>

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

Popover

<quiet-popover>

Popovers provide additional information or functionality without interrupting the flow of content.

Progress

<quiet-progress>

Progress bars represent the completion status of a request or task.

QR

<quiet-qr>

Generates a QR Code.

Radio

<quiet-radio>

Radios let the user select one option from a group of choices.

Radio Item

<quiet-radio-item>

Radio items represent individual choices within a radio.

Rating

<quiet-rating>

Ratings let users 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.

Scroller

<quiet-scroller>

Scrollers add an accessible horizontal scrolling region with visual affordances to help users navigate wide content such as tables, especially on mobile devices.

Search List

<quiet-search-list>

Search lists let you query a collection of items based on their content and keywords.

Select

<quiet-select>

Selects let users choose an option from a predefined list of options.

Share

<quiet-share>

Share buttons let users share links, files and text via their operating system's share interface.

Slide Activator

<quiet-slide-activator>

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

Slider

<quiet-slider>

Sliders let users select numeric values within a given range by moving a thumb along a track.

Sparkline

<quiet-sparkline>

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

Spinner

<quiet-spinner>

Spinners tell 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>

Spoilers conceal sensitive content and give the user the option of showing it or not, preventing unintentional disclosure.

Stamp

<quiet-stamp>

Stamps render templates with simple expressions, logic, and custom data.

Switch

<quiet-switch>

Switches let the user toggle between two mutually exclusive states, such as on and off.

Tab

<quiet-tab>

Tabs describe and select a tab panel within a tab list.

Tab List

<quiet-tab-list>

Tab lists let users switch between different sections of content without leaving the page, providing a clean and organized interface.

Tab Panel

<quiet-tab-panel>

Tab panels hold the content that gets displayed when a tab is selected.

Text Area

<quiet-text-area>

Text areas let users edit multi-line, plain text content.

Text Field

<quiet-text-field>

Text fields let users input and edit text.

Text Mask

<quiet-text-mask>

Text masks apply text as a mask over an image, creating visually stylized characters.

Toast

<quiet-toast>

Toasts are temporary, non-intrusive notifications that appear above the page's content.

Toast Item

<quiet-toast-item>

Toast items are the notifications displayed by the toast component.

Toggle Icon

<quiet-toggle-icon>

Toggle icons are like checkboxes, except with icons to represent the checked and unchecked states.

Toolbar

<quiet-toolbar>

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

Tooltip

<quiet-tooltip>

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

Transition Group

<quiet-transition-group>

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

Typewriter

<quiet-typewriter>

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