Celebrating the launch of Chakra 3.0

Chakra UI is a component system for building products with speed

Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC

Start Building
npm i @chakra-ui/react
Slider
Pin Input
Chakra UI is a component library for building web applications.
Tabs
Switch

Built for modern product teams.
From next-gen startups to established enterprises.

Design System

Build your design system on top of Chakra UI

Spend less time writing UI code and more time building a great experience for your customers.

  • Tokens. Streamline design decisions with semantic tokens

  • Typography. Customise your font related properties in one place

  • Recipes. Design components variants with ease

import { defineTokens } from "@chakra-ui/react"

export const tokens = defineTokens({
  colors: {
    primary: { value: "#0FEE0F" },
    secondary: { value: "#EE0F0F" },
  },
  fonts: {
    body: { value: "system-ui, sans-serif" },
  },
  animations: {
    "slide-in-right": { value: "slide-in-right 0.5s ease-in-out" },
  },
})

Built for developers By developers

Built for modern product teams.
From next-gen startups to established enterprises.

2.4M

downloads / month

37.6K

github stars

9.1K

discord members

Top-tier teams use and love Chakra

Chakra UI is glorious. Dark mode support looks amazing and it is 100% built-in. I love the consistent use of focus styling and the subtle animation. Great care for accessibility throughout. It is a guiding principle of the design system.

Guillermo Rauch

CEO / Vercel

Guillermo Rauch

Chakra is a fantastic component library that helps shape and accelerate the work we're doing with Twilio Paste. Thank you @thesegunadebayo!

Aayush Iyer

Engineer / Twillio

Aayush Iyer

Awesome new open-source component library from @thesegunadebayo. Really impressive stuff!

Colm Tuite

CEO / Modulz

Colm Tuite

Chakra UI has become part of our default stack for React apps, Chakra saves our team tons of time, is well designed and documented, has solid accessibility defaults, and looks great out of the box.

Echobind Engineering

Echobind

Echobind Engineering

Sponsors

Sponsored by these amazing companies

Our maintainers devote their time, effort, and heart to ensure Chakra UI keeps getting better. Support us by donating to our collective 🙏

SponsorPatreon

Gold + Platinum Sponsors

Elia saadehGoread.ioBairesDevFamoidVeePN VPNOnline United States CasinosBuy Youtube Views - Views4YouLyssnaScribeEchobindBriklBuy YouTube Views - SidesMediaShootProofShogunBuy Instagram Followers TwicsyTouchlessBuy Instagram Followers ThunderclapitBuy Google ReviewsLivecycleBuzzoid - Buy Instagram FollowerstechreviewerVPS ServerXataBuy Instagram followers InsfollowproSS MarketMeeshkan

Works with your favorite application framework

Chakra provides a consistent developer experience for most modern frameworks

Ready made templates

Build even faster with Chakra Pro 💎

Premade components and pages for application, marketing and ecommerce. Beautiful and responsive.

Explore Templates
Chakra UI Pro