Dev Design Library

Chakra UI components

Chakra UI is a component system for building SaaS products with speed ⚡️

Components
138
Framework
React
Stack
React, TypeScript, CSS-in-JS
License
MIT
GitHub stars
40,676
Source
https://github.com/chakra-ui/chakra-ui
Website
https://chakra-ui.com
Install
npm i @chakra-ui/react @emotion/react

All Chakra UI components

  • Absolute Center: Used to horizontally and vertically center an element relative to its parent dimensions using absolute positioning.
  • Accordion: Used to show and hide sections of related content on a page
  • Action Bar: Used to display a bottom action bar with a set of actions
  • Alert: Used to communicate a state that affects a system, feature or page.
  • Area Chart: Used to display quantitative data by filling the area between the line and axis, showing trends and patterns over time
  • Aspect Ratio: Maintain a consistent aspect ratio for embedding videos, images, maps, etc.
  • Avatar: Used to represent user profile picture or initials
  • Badge: Used to highlight an item's status for quick recognition.
  • Bar Chart: Used to display categorical data using rectangular bars of varying heights or lengths
  • Bar List: Used to display categorical data with horizontal bars, showing comparisons between different categories or items
  • Bar Segment: Used to display data as segments within a horizontal bar, showing proportions and part-to-whole relationships between values
  • Bleed: Used to break an element from the boundaries of its container
  • Blockquote: Used to quote text content from an external source
  • Box: The most abstract styling component in Chakra UI on top of which all other Chakra UI components are built.
  • Breadcrumb: Used to display a page's location within a site's hierarchical structure
  • Button: Used to trigger an action or event
  • Calendar: Used to display an inline calendar for selecting dates or date ranges.
  • Card: Used to display content related to a single subject.
  • Carousel: Used to cycle through a series of visual content within a container.
  • Center: Used to center its child within itself.
  • Checkbox: Used in forms when a user needs to select multiple values from several options
  • Checkbox Card: Used to select or deselect options displayed within cards.
  • Checkmark: A visual indicator used to show checked, unchecked, or indeterminate states
  • Circle
  • Client Only: Used to render content only on the client side.
  • Clipboard: Used to copy text to the clipboard
  • Close Button: Used to trigger close functionality
  • Code: Used to display inline code
  • Code Block: Used to display and highlight dynamic code blocks
  • Collapsible: Used to expand and collapse additional content.
  • Color Picker: Used to select colors from a color area or a set of defined swatches
  • Color Swatch: Used to preview a color
  • Combobox: A versatile input component that combines a text input with a listbox, allowing users to filter a list of options and select single or…
  • Command: Used to build searchable command menus, search dialogs, and pickers.
  • Container: Used to constrain a content's width to the current breakpoint, while keeping it fluid.
  • Data List: Used to display a list of similar data items.
  • Date Input: Used to enter a specific date using segmented keyboard input.
  • Date Picker: Used to select dates or date ranges from a calendar.
  • Dialog: Used to display a dialog prompt
  • Donut Chart: Used to display data as segments of a circular chart that looks like a donut
  • Download Trigger: Used to trigger a download of a file.
  • Drawer: Used to render a content that slides in from the side of the screen.
  • Editable: Used for inline renaming of some text.
  • Em
  • Empty State: Used to indicate when a resource is empty or unavailable.
  • Environment Provider: Used to render components in iframes, Shadow DOM, or Electron.
  • Field: Used to add labels, help text, and error messages to form fields.
  • Fieldset: A set of form controls optionally grouped under a common name.
  • File Upload: Used to select and upload files from their device.
  • Flex: Used to manage flex layouts
  • Float: Used to anchor an element to the edge of a container.
  • Floating Panel: Used to render a draggable, resizable panel that floats above the page content.
  • Focus Trap
  • For: Used to loop over an array and render a component for each item.
  • Format Byte: Used to format bytes to a human-readable format
  • Format Number: Used to format numbers to a specific locale and options
  • Grid: Used to manage grid layouts
  • Group: Used to group and attach elements together
  • Heading: Used to render semantic HTML heading elements.
  • Highlight: Used to highlight substrings of a text.
  • Hover Card: Used to display content when hovering over an element
  • Icon: Used to display an svg icon
  • Icon Button: Used to render an icon within a button
  • Image: Used to display images
  • Input: Used to get user input in a text field.
  • Input Addon
  • Input Element
  • Input Group
  • Kbd: Used to show key combinations for an action
  • Line Chart: Used to display data points connected by straight line segments, showing trends and patterns in continuous data over time or sequences
  • Link: Used to provide accessible navigation
  • Link Overlay: Used to stretch a link over a container.
  • List: Used to display a list of items
  • Listbox: Used to display a list of options for selection.
  • Loader
  • Locale Provider: Used for globally setting the locale
  • Mark
  • Marquee: Create a continuous scrolling display of logos, images, or text horizontally or vertically.
  • Menu: Used to create an accessible dropdown menu
  • Native Select
  • Number Input: Used to enter a number, and increment or decrement the value using stepper buttons.
  • Overlay Manager: Used for programmatically controlling overlay components
  • Pagination: Used to navigate through a series of pages.
  • Password Input: Used to collect passwords.
  • Pie Chart
  • Pin Input: Used to capture a pin code or otp from the user
  • Popover: Used to show detailed information inside a pop-up
  • Portal: Used to render an element outside the DOM hierarchy.
  • Presence: Used to animate the entry and exit of an element while controlled the render behavior
  • Progress: Used to display the progress status for a task.
  • Progress Circle: Used to display a task's progress in a circular form.
  • Prose: Used to style remote HTML content
  • Qr Code: A component that generates a QR code based on the provided data.
  • Quote
  • Radar Chart
  • Radio: Used to select one option from several options
  • Radio Card: Used to select an option from list
  • Radiomark: A visual indicator used to show selected and unselected radio states
  • Rating: Used to show reviews and ratings in a visual format.
  • Rich Text Editor: Used to create and format text content visually, built on Tiptap.
  • Scatter Chart: Used to show the relationship between two sets of data
  • Scroll Area: Used to create a scrollable area with custom styled scrollbars
  • Segmented Control: Used to pick one choice from a linear set of options
  • Select
  • Separator: Used to visually separate content
  • Show: Used to conditional render part of the view based on a condition.
  • Simple Grid: SimpleGrid provides a friendly interface to create responsive grid layouts with ease.
  • Skeleton: Used to render a placeholder while the content is loading.
  • Skip Nav: Skip Nav Link allows keyboard users to skip to the main content of the page.
  • Slider: Used to allow users to make selections from a range of values.
  • Spacer: A flexible flex spacer that expands along the major axis of its containing flex layout. It renders a div by default, and takes up any…
  • Span
  • Sparkline: A small, simple chart without axes or coordinates that shows the general shape of data variation, typically used inline with text or in…
  • Spinner: Used to provide a visual cue that an action is processing
  • Splitter: The Splitter component allows users to resize panels by dragging a handle between them. It supports horizontal, vertical, multi-panel…
  • Square
  • Stack: Used to layout its children in a vertical or horizontal stack.
  • Stat: Used to display a statistic with a title and value.
  • Status: Used to indicate the status of a process or state
  • Steps: Used to indicate progress through a multi-step process
  • Sticky
  • Strong
  • Switch: Used to capture a binary state
  • Table: Used to display data in a tabular format.
  • Tabs: Used to display content in a tabbed interface
  • Tag: Used for categorizing or labeling content
  • Tags Input: Used to enter multiple values as tags with features like tag creation, deletion, and keyboard navigation.
  • Text: Used to render text and paragraphs within an interface.
  • Textarea: Used to enter multiple lines of text.
  • Theme: Used to force a part of the tree to light or dark mode.
  • Timeline: Used to display a list of events in chronological order
  • Toast: Used to display a temporary message to the user
  • Toggle
  • Toggle Tip: Looks like a tooltip, but works like a popover.
  • Tooltip: How to customize the tooltip of the charts component
  • Tree View: Used to display hierarchical data structures in an expandable tree format
  • Visually Hidden: Used to hide content visually but keep it accessible to screen readers.
  • Wrap: Used to add space between elements and wraps automatically if there isn't enough space.

Browse by category