Chakra UI Docs is an open-source documentation website template for the Chakra UI React component library, built with Next.js, React, and TypeScript, that powers the official chakra-ui.com site. It was originally maintained in the chakra-ui/chakra-ui-docs repository and has since moved to the main chakra-ui/chakra-ui repository under the website directory.
What is Chakra UI Docs?
Chakra UI Docs is the source code behind https://chakra-ui.com, the official documentation site for Chakra UI, a set of accessible, reusable, and composable React components. The site takes documentation content about Chakra UI's components, style props, and theming and renders it as a public website. The latest version's docs live on the main domain, while older versions are preserved at v1.chakra-ui.com and v0.chakra-ui.com.
Key Features
- Next.js and React — The site is built with the Next.js framework, React, and TypeScript, providing routing and static generation for a fast documentation experience.
- Accessible components — Chakra UI components follow the WAI-ARIA guidelines and include proper
aria-* attributes, which the documentation highlights as a selling point.
- Ease of styling — Layout components such as
Box and Stack allow you to pass style props directly to components, a pattern central to Chakra UI's API.
- Dark mode support — Most Chakra UI components are dark-mode compatible, and the docs cover enabling and switching dark mode.
- Composable primitives — The component library is built on a React UI Primitive for endless composability, explained throughout the docs.
- Open Collective funding — The project accepts donations via Open Collective; individual and organizational supporter avatars are listed in the repository.
Who is it for?
- React developers — Learn how to build accessible, composable user interfaces with Chakra UI by following the documentation content, component examples, and API references.
- Documentation maintainers — Use this repository as a real-world example of a Next.js-based documentation site for an open-source library, including versioned docs and a contributing guide.
- Open-source contributors — Contribute fixes and new examples directly to the docs; the repository includes a
CONTRIBUTING.md guide and an all-contributors list.
What can you do with Chakra UI Docs?
- Browse the library reference: Explore Chakra UI's component APIs, style props, and dark-mode theming through the live site while reviewing the underlying code in this repository.
- Build a similar docs site: Use the Next.js project structure and component patterns visible here as a starting point for your own developer documentation website.
- Contribute to the ecosystem: Fix documentation issues, add missing examples, or translate content; the repository documents the contribution workflow and credits all contributors.
FAQ
Is Chakra UI free?
Yes. Chakra UI is MIT-licensed, and the documentation website is open source. The project also accepts voluntary donations through Open Collective to support ongoing development.
What is Chakra UI Docs built with?
The documentation website is built with Next.js, React, and TypeScript. It is the official source for chakra-ui.com and lives in the main Chakra UI repository's website directory.
