Components

Used to show and hide sections of related content on a page

Used to display a bottom action bar with a set of actions

Used to communicate a state that affects a system, feature or page.

Used to embed responsive videos and maps, etc

Used to represent user profile picture or initials

Used to highlight an item's status for quick recognition.

Used to break an element from the boundaries of its container

Used to quote text content from an external source

The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built.

Used to display a page's location within a site's hierarchical structure

Used to trigger an action or event

Used to display content related to a single subject.

Used to center its child within itself.

Used to select or deselect options displayed within cards.

Used in forms when a user needs to select multiple values from several options

Used to render content only on the client side.

Used to copy text to the clipboard

Used to trigger close functionality

Used to display inline code

Used to expand and collapse additional content.

Used to select colors from a color area or a set of defined swatches

Used to preview a color

Used to constrain a content's width to the current breakpoint, while keeping it fluid.

Used to display a list of similar data items.

Used to display a dialog prompt

Used to render a content that slides in from the side of the screen.

Used for inline renaming of some text.

Used to mark text for emphasis.

Used to indicate when a resource is empty or unavailable.

Used to render components in iframes, Shadow DOM, or Electron.

Used to add labels, help text, and error messages to form fields.

A set of form controls optionally grouped under a common name.

Used to select and upload files from their device.

Used to manage flex layouts

Used to anchor an element to the edge of a container.

Used to loop over an array and render a component for each item.

Used to format bytes to a human-readable format

Used to format numbers to a specific locale and options

Used to manage grid layouts

Used to group and attach elements together

Used to render semantic HTML heading elements.

Used to highlight substrings of a text.

Used to display content when hovering over an element

Used to render an icon within a button

Used to display an svg icon

Used to display images

Used to get user input in a text field.

Used to show key combinations for an action

Used to stretch a link over a container.

Used to provide accessible navigation

Used to display a list of items

Used for globally setting the locale

Used to mark text for emphasis.

Used to create an accessible dropdown menu

Used to pick a value from predefined options.

Used to enter a number, and increment or decrement the value using stepper buttons.

Used to navigate through a series of pages.

Used to collect passwords.

Used to capture a pin code or otp from the user

Used to show detailed information inside a pop-up

Used to render an element outside the DOM hierarchy.

Used to display a task's progress in a circular form.

Used to display the progress status for a task.

Used to style remote HTML content

Used to select an option from list

Used to select one option from several options

Used to show reviews and ratings in a visual format.

Used to pick one choice from a linear set of options

Used to pick a value from predefined options.

Used to visually separate content

Used to conditional render part of the view based on a condition.

SimpleGrid provides a friendly interface to create responsive grid layouts with ease.

Used to render a placeholder while the content is loading.

Used to allow users to make selections from a range of values.

Used to provide a visual cue that an action is processing

Used to layout its children in a vertical or horizontal stack.

Used to display a statistic with a title and value.

Used to indicate the status of a process or state

Used to indicate progress through a multi-step process

Used to capture a binary state

Used to display data in a tabular format.

Used to display content in a tabbed interface

Used for categorizing or labeling content

Used to render text and paragraphs within an interface.

Used to enter multiple lines of text.

Used to force a part of the tree to light or dark mode.

Used to display a list of events in chronological order

Used to display a temporary message to the user

Looks like a tooltip, but works like a popover.

Used to display additional information when a user hovers over an element.

Used to hide content visually but keep it accessible to screen readers.