Tabs

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" },
  },
})

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

Build even faster with Chakra Pro 💎

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