Skip to content

Browse Components

Avatar

<quiet-avatar>

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

stable since 1.0

Badge

<quiet-badge>

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

stable since 1.0

Breadcrumb

<quiet-breadcrumb>

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

stable since 1.0

Breadcrumb Item

<quiet-breadcrumb-item>

Breadcrumb items represent a single link or step in the hierarchical structure of an app or website.

stable since 1.0

Browser Frame

<quiet-browser-frame>

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

stable since 1.0

Button

<quiet-button>

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

stable since 1.0

Button Group

<quiet-button-group>

Button groups display related buttons in a stylized group.

stable since 1.0

Bytes

<quiet-bytes>

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

stable since 1.0

Callout

<quiet-callout>

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

stable since 1.0

Card

<quiet-card>

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

stable since 1.0

Checkbox

<quiet-checkbox>

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

stable since 1.0

Checkbox Group

<quiet-checkbox-group>

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

stable since 1.0

Color Input

<quiet-color-input>

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

stable since 1.0

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.

stable since 1.0

Copy

<quiet-copy>

Copy buttons let you copy text and other types of data to the clipboard.

stable since 1.0

Date

<quiet-date>

Outputs a date or time in the specified format.

stable since 1.0

Dialog

<quiet-dialog>

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

stable since 1.0

Divider

<quiet-divider>

Dividers separate and group content visually.

stable since 1.0

Dropdown

<quiet-dropdown>

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

stable since 1.0

Dropdown Item

<quiet-dropdown-item>

Dropdown items can be selected from inside a dropdown menu.

stable since 1.0

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.

stable since 1.0

File Input

<quiet-file-input>

File inputs let the user select files to upload to the server.

stable since 1.0

Fit Text

<quiet-fit-text>

Scales a line of text to fit within its container.

stable since 1.0

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.

stable since 1.0

Hotkey

<quiet-hotkey>

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

stable since 1.0

Icon

<quiet-icon>

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

stable since 1.0

Include

<quiet-include>

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

stable since 1.0

Joystick

<quiet-joystick>

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

stable since 1.0

Listbox

<quiet-listbox>

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

stable since 1.0

Listbox Item

<quiet-listbox-item>

Listbox items represent individual choices within a listbox.

stable since 1.0

Lorem Ipsum

<quiet-lorem-ipsum>

Outputs placeholder text for testing designs with random content.

stable since 1.0

Number

<quiet-number>

Outputs a number in the specified format.

stable since 1.0

Number Ticker

<quiet-number-ticker>

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

stable since 1.0

Passcode

<quiet-passcode>

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

stable since 1.0

Popover

<quiet-popover>

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

stable since 1.0

Progress

<quiet-progress>

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

stable since 1.0

QR

<quiet-qr>

Generates a QR Code.

stable since 1.0

Radio

<quiet-radio>

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

stable since 1.0

Radio Item

<quiet-radio-item>

Radio items represent individual choices within a radio.

stable since 1.0

Rating

<quiet-rating>

Ratings let users provide feedback based on their satisfaction with a product or service.

stable since 1.0

Relative Time

<quiet-relative-time>

Outputs a relative time in a human-readable format.

stable since 1.0

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.

stable since 1.0

Search List

<quiet-search-list>

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

stable since 1.0

Select

<quiet-select>

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

stable since 1.0

Share

<quiet-share>

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

stable since 1.0

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.

stable since 1.0

Slider

<quiet-slider>

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

stable since 1.0.0

Sparkline

<quiet-sparkline>

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

stable since 1.0

Spinner

<quiet-spinner>

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

stable since 1.0

Splitter

<quiet-splitter>

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

stable since 1.0

Spoiler

<quiet-spoiler>

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

stable since 1.0

Stamp

<quiet-stamp>

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

experimental since 1.0

Switch

<quiet-switch>

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

stable since 1.0

Tab

<quiet-tab>

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

stable since 1.0

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.

stable since 1.0

Tab Panel

<quiet-tab-panel>

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

stable since 1.0

Text Area

<quiet-text-area>

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

stable since 1.0

Text Field

<quiet-text-field>

Text fields let users input and edit text.

stable since 1.0

Text Mask

<quiet-text-mask>

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

stable since 1.0.0

Toast

<quiet-toast>

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

stable since 1.0.0

Toast Item

<quiet-toast-item>

Toast items are the notifications displayed by the toast component.

stable since 1.0

Toggle Icon

<quiet-toggle-icon>

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

stable since 1.0

Toolbar

<quiet-toolbar>

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

stable since 1.0

Tooltip

<quiet-tooltip>

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

stable since 1.0

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.

stable since 1.0

Typewriter

<quiet-typewriter>

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

stable since 1.0

Sorry, nothing like that has been built yet!
Ask for it here

Search this website Toggle dark mode Get the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found