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.
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 Picker
<quiet-color-picker>
Color pickers provide an interface for selecting a color using a two-dimension slider for luminosity and saturation and regular sliders for hue and opacity.
Copy
<quiet-copy>
Copy buttons let you copy text and other types of data to the clipboard.
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.
Lorem Ipsum
<quiet-lorem-ipsum>
Outputs placeholder text for testing designs with random content.
Number
<quiet-number>
Outputs a number in the specified format.
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.
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.
Spinner
<quiet-spinner>
Spinners tell the user that content is loading or a request is processing in the background.
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.
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.