Components

Components

A comprehensive library of React components for building beautiful, accessible user interfaces.

  • Accessible Icon

    Makes icons accessible by adding a label.

  • Alert Dialog

    Modal confirmation dialog that interrupts the user and expects a response.

  • Aspect Ratio

    Displays content within a desired ratio.

  • Avatar

    Profile picture, user initials or fallback icon.

  • Badge

    Stylized badge element.

  • Blockquote

    Block-level quotation from another source.

  • Box

    Fundamental layout building block.

  • Button

    Trigger an action or event, such as submitting a form or displaying a dialog.

  • Callout

    Short message to attract user’s attention.

  • Card

    Container that groups related content and actions.

  • Checkbox

    Base input element to toggle an option on and off.

  • Checkbox Cards

    Set of interactive cards where multiple options can be selected at a time.

  • Checkbox Group

    Set of interactive buttons where multiple options can be selected at a time.

  • Code

    Marks text to signify a short fragment of computer code.

  • Container

    Constrains the maximum width of page content.

  • Context Menu

    Menu representing a set of actions, displayed at the point of right click or long press.

  • Data List

    Displays metadata as a list of key-value pairs.

  • Dialog

    Modal dialog window displayed above the page.

  • Dropdown Menu

    Menu representing a set of actions, triggered by a button.

  • Em

    Marks text to stress emphasis.

  • Flex

    Component for creating flex layouts.

  • Grid

    Component for creating grid layouts.

  • Heading

    Semantic heading element.

  • Hover Card

    For sighted users to preview content available behind a link.

  • Icon Button

    Button designed specifically for usage with a single icon.

  • Inset

    Applies a negative margin to allow content to bleed into the surrounding container.

  • Kbd

    Represents keyboard input or a hotkey.

  • Link

    Semantic element for navigation between pages.

  • Popover

    Floating element for displaying rich content, triggered by a button.

  • Portal

    Renders a React subtree in a different part of the DOM.

  • Progress

    Displays a progress bar related to a task.

  • Quote

    Short inline quotation.

  • Radio

    Standalone radio button that can be used in any layout.

  • Radio Cards

    Set of interactive cards where only one can be selected at a time.

  • Radio Group

    Set of interactive radio buttons where only one can be selected at a time.

  • Reset

    Removes default browser styles from any component.

  • Scroll Area

    Custom-styled scrollable area using native functionality.

  • Section

    Denotes a section of page content.

  • Segmented Control

    Toggle buttons for switching between different values or views.

  • Select

    Displays a list of options for the user to pick from—triggered by a button.

  • Separator

    Visually or semantically separates content.

  • Skeleton

    Replaces content with same shape placeholder that indicates a loading state.

  • Slider

    Provides user selection from a range of values.

  • Slot

    Merges its props onto its immediate child.

  • Spinner

    Displays an animated loading indicator.

  • Strong

    Marks text to signify strong importance.

  • Switch

    Toggle switch alternative to the checkbox.

  • Tab Nav

    Navigation menu with links styled as tabs.

  • Table

    Semantic table element for presenting data.

  • Tabs

    Set of content sections to be displayed one at a time.

  • Text

    Foundational text primitive.

  • Text Area

    Captures multi-line user input.

  • Text Field

    Captures user input with an optional slot for buttons and icons.

  • Theme

    Wraps all or part of a React tree to provide theme configuration.

  • Tooltip

    Floating element that provides a control with contextual information via pointer or focus.

  • Visually Hidden

    Hides content from the screen in an accessible way.