Components

The App Shell defines the main structure of your app.

A sliding side panel for secondary content.

Top navigation, typically used as primary navigation in websites or stacked application layouts.

Page layout with header, body, and loading states.

Collapsible side navigation, typically used as the primary navigation of SaaS applications.

A master-detail layout with a list pane and detail pane.

Used to trigger an action or event

Used to trigger closing of dialogs, panels, and other components.

Used to trigger a download of a file or data

Used to render an icon within a button

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

Used to display content related to a single subject.

Used to copy text to the clipboard

Used to display and highlight dynamic code blocks

Used to preview a color

Used to display a list of similar data items.

Used to display large datasets with sorting and pagination

Used to filter data with typed fields, operators and value editors

Used to display a list of interactive items.

Used to generate a QR code based on the provided data

Used to visually separate content

Used to display a statistic with a title and value.

Used to indicate the status of a process or state

Used to display data in a tabular format.

Used for categorizing or labeling content

Used to display a list of events in chronological order

Used to display hierarchical data structures in an expandable tree format

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

Used to expand and collapse additional content.

Used to display content in a tabbed interface

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

Used to indicate when a resource is empty or unavailable.

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

Used to display the progress status for a task.

Used to render a placeholder while the content is loading.

Used to provide a visual cue that an action is processing

Used to display a temporary message to the user

Used to select or deselect options displayed within cards.

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

A visual indicator used to show checked, unchecked and indeterminate states.

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

A versatile input component that combines a text input with a listbox, allowing users to filter a list of options and select single or multiple values.

Used to select dates or date ranges from a calendar.

Used for inline renaming of some text.

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 get user input in a text field.

Used to display a list of options for selection.

Used to pick a value from predefined options.

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

Used to collect passwords.

Used to capture a pin code or otp from the user

Used to select an option from list

Used to select one option from several options

A visual indicator used to show selected and unselected states.

Used to show reviews and ratings in a visual format.

Used to write formatted text with a composable toolbar

Used to pick one choice from a linear set of options

Used to pick a value from predefined options.

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

Used to capture a binary state

Used to enter multiple values as tags with features like tag creation, deletion, and keyboard navigation.

Used to enter multiple lines of text.

Used to create a button that can be toggled on and off.

Used to horizontally and vertically center an element relative to its parent dimensions using absolute positioning.

Used to embed responsive videos and maps, etc

Used to break an element from the boundaries of its container

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

Used to center its child within itself.

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

Used to manage flex layouts

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

Used to manage grid layouts

Used to group and attach elements together

Used to create a scrollable area with custom styled scrollbars

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

Used to create resizable panels that the user can drag apart with a handle

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

Used to add space between elements and wraps automatically if there isn't enough space.

Used to represent user profile picture or initials

Used to cycle through a series of visual content within a container

Used to display an svg icon

Used to display an svg icon

Used to display images

Create a continuous scrolling display of logos, images, or text horizontally or vertically

Used to represent a user or entity

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

Used to navigate through a series of pages.

Used to indicate progress through a multi-step process

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

Used to display a dialog prompt

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

Used to render a draggable, resizable panel that floats above the page content

Used to display content when hovering over an element

Used to create an accessible dropdown menu

Open type-safe dialogs and drawers from anywhere in your app

Used to open dialogs and drawers programmatically, without wiring up local open state.

Used to show detailed information inside a pop-up

Looks like a tooltip, but works like a popover.

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

Used to quote text content from an external source

Used to display inline code

Used to mark text for emphasis.

Used to render semantic HTML heading elements.

Used to highlight substrings of a text.

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 to mark text for emphasis.

Used to style remote HTML content, such as markdown or a CMS response, with the Saas UI typography language.

Used to render text and paragraphs within an interface.

Used to render content only on the client side.

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

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 dates to a specific locale and options

Used to format numbers to a specific locale and options

Used for globally setting the locale

Used to render an element outside the DOM hierarchy.

Used to animate the entry and exit of an element while controlling the render behavior.

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

Allows keyboard and screen reader users to skip repeated content and jump straight to the main content of the page.

Used to force a part of the tree to light or dark mode, and to override appearance tokens like radius and scale.

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