Docs
Guides
Resources
Showcase
FAQ
Team

Getting Started

Features

Style Props
Gradient
Color Mode
CSS Variables
Responsive Styles
Chakra Factory
Global Styles
Text & Layer Styles
The sx Prop
RTL Support

Theming

Default Theme
Customize Theme
Component Style
Advanced

Layout

Aspect Ratio
Box
Center
Container
Flex
Grid
SimpleGrid
Stack
Wrap

Forms

Button
Checkbox
Editable
Form Control
Icon Button
Input
Number Input
Pin Input
Radio
Range SliderNew
Select
Slider
Switch
Textarea

Data Display

Badge
Close Button
Code
Divider
Kbd
List
Stat
Table
Tag

Feedback

Alert
Circular Progress
Progress
Skeleton
Spinner
Toast

Typography

Text
Heading

Overlay

Alert Dialog
Drawer
Menu
Modal
Popover
Tooltip

Disclosure

Accordion
Tabs
Visually Hidden

Navigation

Breadcrumb
Link
LinkOverlay

Media and icons

Avatar
Icon
Image

Others

Portal
Transitions

Hooks

useBoolean
useBreakpointValue
useClipboard
useConst
useControllable
useDisclosure
useMediaQuery
useMergeRefs
useOutsideClick
usePrefersReducedMotion
useTheme
useToken

Community Resources

A rich compilation of technical descriptions and detailed information of how Chakra UI works.

Filter by resource title.

React
UI
Accessibility

The Chakra UI Component Library

by Devmode.fm

In this talk, Segun “Sage” Adebayo talks about how Chakra UI came to be, and how helping people has changed his life.

Vision
UI
Framework

The Future of Chakra UI

by Lee Robinson

Learn about the future of Chakra UI, an accessible React component library, from it's creator Segun Adebayo.

Open source
Life
Balance

Interview with Segun Adebayo: Chakra UI, Open Source, Life.

by Gift Egwuenu

I had the pleasure of inviting Segun Adebayo(Sage) for a chat. We talked about Chakra UI, Open Source, Work-Life Balance and so much more.

React
Demo
Accessibility

Chakra UI Talk and Demo

by ReactEurope

Segun Adebayo talks about how Chakra UI came to be, and performs a live demo.

Chakra UI
v1.0

The road to Chakra 1.0 and all about Chakra UI

by Kitze

Kitze talks to Segun from Chakra - The road to Chakra 1.0 and all about Chakra UI.

Core Team
Chakra UI
Open Source

Maintaining Chakra UI

by Chakra UI

Watch the maintainers of Chakra UI triage issues, add features and release new versions of the library 🎉

Filter by resource title.

Forms
v0.8

React Forms Using Chakra UI

by Karl Hadwen

Learn how to build a React form using Chakra UI.

Course
Getting Started
v0.8

Chakra UI Crash Course

by Mahmoud Shehata

Learn how to get started with Chakra UI (v0.8).

Theming
v1.0

How to use Chakra UI's Default Theme

by Folasade Agbaje

Learn how to use Chakra UI's default theme.

Form
Dark Theme
v0.8

Coding a Login Form with Chakra UI | React | Dark Theme & Light Theme

by Eshwaren Manoharen

Learn how to create a login form with Chakra UI.

Gatsby
Getting Started
v1.0

Chakra UI and Gatsby - Getting Started

by Scott Spence

Get Started with Gatsby using Chakra UI.

Stack
v1.0

How to easily use Chakra UI Stack Component

by Folasade Agbaje

Learn how to easily use Chakra UI Stack Component.

RTL
v1.0

How to enable Right-to-Left (RTL) support using Chakra UI

by Folasade Agbaje

Learn how to enable Right-to-Left (RTL) support using Chakra UI

Gatsby
Getting Started
v0.8

Setting Up Chakra UI in a GatsbyJS App

by Apollo GraphQL

Learn how to Set Up Chakra UI in a GatsbyJS App.

Landing page
v0.8

Making a set of React + Chakra UI components for building landing pages

by Kitze

Learn how to build landing pages in React using Chakra UI components.

Portfolio Website
Next.js
Framer Motion
Three.js
v1.7.2

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

by devaslife

Learn how Takuya Matsuyama builds his portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js.

Next.js
Dark Mode
v1.0

Chakra UI Quickstart - With Next.js

by Benjamin Carlson

Learn about the basic components of chakra-ui, add it to Next.js and make a dark switch component.

Next.js
Design Implementation
v1.6.2

Chakra UI: Design vs Dev Challenge #1

by Lazar Nikolov

In this video Lazar is rebuilding a full Chat App interface designed by Denys Sergushkin.

Next.js
Design Implementation
v1.6.2

Chakra UI: Design vs Dev Challenge #2

by Lazar Nikolov

In this video Lazar is rebuilding the Afrosonic Dashboard Concept designed by Jide Pinheiro's

Chakra UI
Component of the Week
v1.7.2

SimpleGrid: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI SimpleGrid Component is, how to use, props it accepts and around how to make it auto-responsive.

Chakra UI
Component of the Week
v1.7.2

Input: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI Input Component is, how to change input size, style, add elements to input and add add-ons to an input component.

Chakra UI
Component of the Week
v1.7.2

Stack: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI Stack Component is, when to use Stack Component, how to stack items horizontally and vertically and about alternative stack components.

Chakra UI
Component of the Week
v1.7.2

Menu: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI Menu Component is, how to use menu component and how to separate/group Menu items.

Chakra UI
Component of the Week
v1.7.2

Tabs: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI Tabs Component is, how to use Tabs component, some props that Tabs accepts and about Tab Variants.

Chakra UI
Component of the Week
v1.7.2

Modal: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI Modal Component is, how to use Modal component, some props that Modal accepts and how to change Modal Behaviour.

Chakra UI
Component of the Week
v1.7.2

RangeSlider: Chakra UI Component of the Week

by Chakra UI

Learn what Chakra UI RangeSlider Component is, how to use RangeSlider component, parts that make up the RangeSlider Component, some of the props RangeSlider accepts and how to customize RangeSlider.

Chakra UI
Chakra Shorts
v1.7.2

Chakra Shorts #1 - Dynamic Shadow Image

by Andrej Acevski

In this Short we'll we're covering dynamic shadows and how you can create them using Chakra UI.

Filter by resource title.

Vite
Advanced
Theming
v1.6

How To Build an Advanced Multipart Component with Chakra UI

by Lennart Jörgens

Learn how to create a custom made container component that supports light/dark mode, variants, sizes, and color schemes.

Create React App
Dark Mode
v0.8

How to Integrate Chakra UI in React App

by Sumit Kharche

Learn about Chakra UI and also build a react application using Chakra UI components.

Landing page
Router
Responsive
v0.8

Build a Landing Page with Chakra UI

by Jim Raptis

How to build a responsive landing page in React using the Chakra UI design system.

Next.js
Responsive
v0.8

How to Use Chakra UI with Next.js and React

by Colby Fayock

How to take advantage of the power of Chakra UI to build great web apps.

Create React App
Basics
v0.8

Installing and Using Chakra UI with React

by Ashutosh Singh

We will discuss how to install, import, and use components from Chakra UI.

Next.js
Basics
v1.0

How to Build an Image Gallery with NextJS using the Pexels API and Chakra UI

by Ashutosh Singh

In this article, we will build an Image Gallery with Next.js using the Pexels API and Chakra UI v1, a modular and accessible component library.

Next.js
Landing page
Basics
v1.0

How to Set Up Chakra UI with Next JS by creating a Hero component

by creativedesignsguru.com

Learn how to create a simple, beautiful, and reusable hero component built using NextJs and Chakra UI.

Proudly made inby Segun Adebayo

Deployed by ▲ Vercel