The Calendar component is used for displaying data in calendar form, suitable for scenarios involving dates such as schedules, timetables, price calendars, and lunar calendars.

Calendar

Search enables users to specify a word or a phrase to find relevant pieces of content or filter a long list of elements. Commonly represented as a Text Input with a little magnifying glass inside of it.

Search

Modal dialogs are used to present important information or gather essential user input without requiring the user to navigate away from the current page. These dialogs capture the user's attention by overlaying content and blocking interactions.

Modal

A toggle button allows a user to pick between 2 states, selected and deselected, such as making an item as a favorite.

Toggle Button

Generally, an alert displays a prominent message at the top of the screen. It could be used to promote a new feature or provide action-based feedback messages. Theyâ€™re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time.

Alert

The color picker allows for multiple methods of selecting a color. It could be navigating through colors on a color spectrum, or specifying a color in either Red-Green-Blue (RGB); or alpha color code; or Hexadecimal text inputs.

Color Picker

This component is used for presenting various empty states, such as no items, empty search, broken link, welcome screen, etc. They are most commonly seen the first time a user interacts with a product or page, but can be used when data has been deleted or is unavailable. An empty state is an opportunity to engage and delight users adding an actionable button.

Empty State

The rating provides insight regarding people's opinions of a product, service, or experience. Users can also rate what they've purchased.

Rating

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

Button

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

Breadcrumbs

Useful for displaying a visual separator between parts of content. Used to divide sections of an article or to divide inline text and links, such as the operation column of a table.

Divider

A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Use a Spinner when the content to be loaded is unknown or unpredictable.

Spinner

You may find the Number Input in several presentations, either as an Input, or a Label with increment and decrement buttons next to it. This component requires that the user less effort than selecting the input field, tapping the digit “2” on the keypad, and hitting Enter or dismissing the keyboard. For example, to increase the number of guests from 1 to 2 in a form, the user only needs one tap on the plus button.

Number Input

Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, bottom-left, etc). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform.

Toast

Sliders provide a visual indication of adjustable content, where the user can increase or decrease the value by moving the handle along a horizontal track.

Slider

Table is a container for displaying data efficiently. Usually, it allows users to sort, search, paginate, filter data, and take action on large amounts of data.

Table

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

Pagination

A text input is a field that allows a user to write or edit text.

Text Input

A multi-line text input component, used for longer texts in form fields. A Textarea lets users enter long form text which spans over multiple lines.

Textarea

Switch represents a physical switch that allows users to turn things on or off, where choosing an option results in an immediate action.

Switch

The Badge component is a visual indicator for numeric values such as tallies and scores.

Badge

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Tooltip

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Avatar

Checkbox are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Checkbox

Use Radio to select a single option from a list. Radio should be used instead of checkboxes if only one item can be selected from a list.

Radio

A Progress Bar is a linear indicator for providing feedback about an ongoing, user-initiated process.

Progress Bar

Skeleton provides a low fidelity representation of the user interface to visually communicate that content is in the process of loading. Some studies indicate that Skeletons can reduce the user's perceived loading time.

Skeleton

Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

Link

The File Uploader allows a user to transfer a file or submit content of their own.

File Uploader

Tabs

Accordion

The Popover component displays floating informative and actionable content in relation to a target. Popovers appear either at the top, bottom, left, or right of their target.

Popover

A Date Picker is a text input to capture a date. You can select a single date, date range or date and time.

Date Picker

A stepper is a visual representation of a user’s progress through a set of steps, indicating how much the user has completed or how far they are from completing a task.

Stepper

Carousels are for displaying a related set of content items in a row. Items can be paged using the next/previous buttons or by a swipe gesture.

Carousel

Cards are used to group information about subjects and their related actions. Cards can include images, text, buttons, links, and data visualizations.

Card

This component could be thought of as a styled native select tag, but adding to it more functionalities such as filtering, multi selecting, among others. The source of the Select (Dropdown) is a list of options that the user can choose from and apply to an input field to later be submitted.

Select

Similar to the Select (Dropdown) but allowing the user to edit the input field in order to sort through the list of options.

Combobox

This component presents a list of options that take immediate action or navigate the user outside of the current context. It can be thought of as a collection of links or buttons.

Collapse

It's represented by a side panel (it can be on the left or right side of the screen), which lets users navigate the entire content of a product or a section, generally an in-page navigation. It can be fixed and visible on the screen, or it can be collapsed, which appears from a side of the screen, triggered by a button.

Sidebar

Inline Alert

Error State

Success State

Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.

Material Design

Atlassian's official UI library, built according to the Atlassian Design Guidelines.

Atlassian Design System

Our components are a collection of interface elements that can be reused across the Shopify system.

Polaris

Help designers/developers building beautiful products more flexible and working with happiness.

Ant Design

A collection of UX frameworks you can use to build Fluent experiences that fit seamlessly into a broad range of Microsoft products.

Fluent 2

We chose to open-source it to allow the community to design and build their own projects with Primer.

Primer Design System

Welcome to our curated collection of UI goodness, the Zendesk Garden. The Garden is where we grow user interface components for Zendesk products.

Garden

Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.

Spectrum

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Chakra UI

Carbon is IBM’s open-source design system for products and experiences. 

Carbon Design System

The Base design system defines the foundations of user interfaces across Uber's ecosystem of products & services. It brings all Uber experiences together under a single, unified framework.

Base

The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.

Elastic UI

Pajamas is here to make it as comfortable as possible for anyone to contribute towards GitLab. You will find information such as our principles, components, usage guidelines, branding, research methodologies, and more!

Pajamas

Vuetify is a no design skills required Open Source UI Library with beautifully handcrafted Vue Components.

Vuetify

Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation.

Mantine

Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system.

Material UI

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

Radix

Blueprint is an open source project developed at Palantir. A react - based UI toolkit for the web.

Blueprint

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains several npm packages.

Angular Material

The UI building blocks for creating a cohesive design across Pluralsight products.

Pages

Components

Atomic Elements

Buttons

Controls

Data Display

Inputs

Loaders

Navigation

Notifications

Overlays

States

Systems