Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
One of the hardest part of building web app is to build an interactive and accessible web app. Chakra UI is a component library that helps you to build interactive and accessible web app in no time and lets you focus on your app content and logic.
There are a various interactive components that you can use directly such as a Modal and Toast. Implementing these interactive components manually is tedious task and error-prone. In Chakra UI this is just simple as importing the component.
The table below show various components that available in the Chakra UI:
| Component | Description |
|---|---|
| Accordion | Accordions display a list of high-level options that can expand/collapse to reveal more information |
| Alert | Alerts are used to communicate a state that affects a system, feature or page |
| Alert Dialog | AlertDialog component is used to interrupt the user with a mandatory confirmation or action |
| Avatar | The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon |
| Badge | Badges are used to highlight an item's status for quick recognition |
| Button | Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation |
| Breadcrumb | Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website |
| Checkbox | Checkbox component is used in forms when a user needs to select multiple values from several options |
| Circular Progress | Circular Progress is used to indicates the progress for determinate and indeterminate processes |
| Close Button | CloseButton is essentially a button with a close icon |
| Code | Code is a component used to display inline code |
| Divider | Dividers are used to visually separate content in a list or group |
| Drawer | The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page |
| Editable | EditableText is used for inline renaming of some text |
| Form Control | Form Control provides context such as isInvalid, isDisabled, and isRequired to form elements |
| Heading | Heading is used to render semantic HTML heading elements |
| Highlight | Highlight allows you to highlight substrings of a text |
| Icon | Chakra provides a set of commonly used interface icons you can use in your project |
| Icon Button | Icon button renders an icon within in a button |
| Image | The Image component is used to display images with support for fallback |
| Input | Input component is a component that is used to get user input in a text field |
| Keyboard Key | The keyboard key component exists to show which key or combination of keys performs a given action |
| Link | Link is an accessible element for navigation |
| Link Overlay | Link overlay is a semantic component used to wrap elements (cards, blog post, articles, etc.) in a link |
| List | List is used to display list items |
| Menu | An accessible dropdown menu for the common dropdown menu button design pattern |
| Modal | A modal is a dialog that focuses the user's attention exclusively on an information via a window that is overlaid on primary content |
| Number Input | The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values |
| Pin Input | The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly |
| Popover | Popover is a non-modal dialog that floats around a trigger |
| Portal | Renders a component outside the current DOM hierarchy |
| Progress | Progress is used to display the progress status for a task that takes a long time or consists of several steps |
| Radio | Radios are used when only one choice may be selected in a series of options |
| Range Slider | The RangeSlider is a multi thumb slider used to select a range of related values |
| Select | Select component is a component that allows users pick a value from predefined options |
| Show Hide | Show and Hide wrapper components render or not render the child elements if the media query matches |
| Skeleton | Skeleton is used to display the loading state of some component |
| Skip Nav | Skip Nav Link allows keyboard users to skip to the main content of the page |
| Slider | The Slider is used to allow users to make selections from a range of values |
| Spinner | Spinners provide a visual cue that an action is processing awaiting a course of change or a result |
| Stat | As the name implies, the Stat component is used to display some statistics |
| Switch | The Switch component is used as an alternative for the checkbox component |
| Table | Table component is used to organize and display data efficiently |
| Tabs | A React component that helps you build accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern |
| Tag | Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them |
| Text | Text is the used to render text and paragraphs within an interface |
| Text Area | The Textarea component allows you to easily create multi-line text inputs |
| Toast | The toast component is used to give feedback to users after an action has taken place |
| Tooltip | A tooltip is a brief, informative message that appears when a user interacts with an element |
| Transitions | Chakra exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions |
| Visually Hidden | VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers |
You can learn more about Chakra UI here.
