Component System

Chakra UI

A simple, modular, and accessible React component library providing building blocks for creating user interfaces with speed using a style props API.

Frameworks

react

Styling Approach

css-in-js

Category

general

Maturity

stable

Version

unknown

Components (48)

Section 1Section 2
AccordionA Accordion component provided by Chakra UI.
Warning messageSuccess message
AlertA Alert component provided by Chakra UI.
AvatarA Avatar component provided by Chakra UI.
5
BadgeA Badge component provided by Chakra UI.
BoxA Box component provided by Chakra UI.
Home/Products/Item
BreadcrumbA Breadcrumb component provided by Chakra UI.
PrimaryOutlinedDanger
ButtonA Button component provided by Chakra UI.
CardA Card component provided by Chakra UI.
CheckedUncheckedIndeterminate
CheckboxA Checkbox component provided by Chakra UI.
CloseButtonA CloseButton component provided by Chakra UI.
CodeA Code component provided by Chakra UI.
ContainerA Container component provided by Chakra UI.
OR
DividerA Divider component provided by Chakra UI.
Drawer×
DrawerA Drawer component provided by Chakra UI.
EditableA Editable component provided by Chakra UI.
FlexA Flex component provided by Chakra UI.
FormControlA FormControl component provided by Chakra UI.
GridA Grid component provided by Chakra UI.
Aa
HeadingA Heading component provided by Chakra UI.
HighlightA Highlight component provided by Chakra UI.
IconA Icon component provided by Chakra UI.
ImageA Image component provided by Chakra UI.
Enter text...
InputA Input component provided by Chakra UI.
KbdA Kbd component provided by Chakra UI.
LinkA Link component provided by Chakra UI.
ListA List component provided by Chakra UI.
DashboardSettingsProfileLogout
MenuA Menu component provided by Chakra UI.
Confirm×NoYes
ModalA Modal component provided by Chakra UI.
NumberInputA NumberInput component provided by Chakra UI.
PinInputA PinInput component provided by Chakra UI.
TriggerPopover title
PopoverA Popover component provided by Chakra UI.
70%
ProgressA Progress component provided by Chakra UI.
Option AOption BOption C
RadioA Radio component provided by Chakra UI.
RangeSliderA RangeSlider component provided by Chakra UI.
Select optionOption AOption BOption C
SelectA Select component provided by Chakra UI.
SkeletonA Skeleton component provided by Chakra UI.
60%
SliderA Slider component provided by Chakra UI.
SpinnerA Spinner component provided by Chakra UI.
StackA Stack component provided by Chakra UI.
StatA Stat component provided by Chakra UI.
OnOff
SwitchA Switch component provided by Chakra UI.
NameStatusRoleAliceActiveAdminBobPendingUserCarolActiveEditor
TableA Table component provided by Chakra UI.
Tab 1Tab 2Tab 3
TabsA Tabs component provided by Chakra UI.
BlueGreenYellowRed
TagA Tag component provided by Chakra UI.
Aa
TextA Text component provided by Chakra UI.
Enter text...
TextareaA Textarea component provided by Chakra UI.
i×!
ToastA Toast component provided by Chakra UI.
ButtonTooltip text
TooltipA Tooltip component provided by Chakra UI.

Tags

accessiblemodularstyle-propscomposable

Newsletter

Weekly Component Digest

Get the latest component library updates, new additions, featured jobs, and practical frontend resources delivered to your inbox every week.