Skip to content
IndexDesign corpus
Best in classComponent LibrariesReact Component Libraries
Component LibrariesComponent LibraryPrimitiveMITOpen sourceReact

Chakra UI

114 accessible React components with a token-driven styling system

Visit resourceDocsRepositoryRegistry
Aboutchakra-ui.com

Chakra UI is a React component system built on Ark UI and Zag.js state machines, with a token-based styling engine and first-class dark mode. Version 3.36.1 documents around 114 components across layout, typography, forms, collections, overlays, feedback and data display, installed as an npm package and scaffolded with a CLI snippet command. It ships an official MCP server and llms.txt files, so agents can query components and theme tokens directly. Chakra UI Pro adds paid pre-built pages and templates.

Install
npm i @chakra-ui/react @emotion/react && npx @chakra-ui/cli snippet add
For an agent

Reach for Chakra instead of shadcn/ui when the team wants a versioned dependency they can upgrade rather than owned source files they must maintain, and when they need breadth — date picker, colour picker, splitter, rich text editor and tree view all exist here and do not in a stock shadcn install. Always run `npx @chakra-ui/cli snippet add` after installing: v3 splits primitives from the composed snippets, and code written against v2's prop API will not compile. Best of all, add the MCP server with `claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp` and call list_components and get_component_props rather than guessing — and use the v2_to_v3_code_review tool on any legacy Chakra codebase before touching it.

Why it is here. One of the few large React libraries that is simultaneously accessibility-serious, actively shipping, and genuinely agent-legible — llms.txt, an official MCP server, and 40k stars behind it.

Install command, framework, licence and component list.
Components it ships114 total
Aspect RatioBoxCenterContainerGridStackScroll AreaSeparatorSplit ViewQuoteCode BlockHeadingKbdLinkListTypographyRich Text EditorButtonClose ButtonIcon ButtonDate PickerCalendarCheckboxColor PickerInline EditFieldsetFile UploadText InputNumber InputPassword InputOtp InputRadio ButtonRadio GroupRating InputSegmented ControlSelectSwitchSliderTextareaTag InputLabelValidation MessageComboboxListboxTree ViewToolbarDialogModalDrawerFloating WindowHover CardDropdown MenuPopoverTooltipAccordionBreadcrumbsCarouselCollapsiblePaginationProgress StepperTabsAlertEmpty StateProgress BarSkeletonSpinnerStatus IndicatorToastAvatarAvatar GroupBadgeCardCopy ButtonImageDescription ListIconMarqueeQr CodeStatTableTagTimelinePortalVisually HiddenTheme ProviderSkip LinkDirection Provider
Helps you build25
Settings Web AppAccount Web AppLogin Web AppSign UpResetting PasswordTwo Factor AuthenticationAdmin PanelUser ManagementInviteMulti Step FormSubmitting A FormShowing Input ErrorSaving ChangesUploading MediaEmpty State404Search ResultsFiltering ItemsSingle Item DetailNotificationsIn App NotificationsAPI KeysBilling Web AppPricing Web AppCommand Palette
Notable for
  • v3.36.1, ~114 documented components
  • official @chakra-ui/react-mcp MCP server
  • llms.txt plus per-topic llms-*.txt sets
  • built on Ark UI and Zag.js state machines
  • 40,577 GitHub stars, MIT, pushed today
Provenance

Verified 2026-08-15. HTTP 200. WebFetch https://chakra-ui.com/, WebFetch https://chakra-ui.com/docs/components/concepts/overview (full component list by category), WebFetch https://chakra-ui.com/docs/get-started/installation (exact install + CLI snippet command, v3.36.1, framework guides), WebFetch https://chakra-ui.com/docs/get-started/ai/mcp-server (MCP add command and tool list), curl https://chakra-ui.com/llms.txt (200), GitHub API chakra-ui/chakra-ui (40577 stars, MIT, pushed 2026-08-15), npm registry @chakra-ui/react@3.36.1

Related resourcesComponent Libraries