Chakra UI 是一个用于构建产品的组件系统，速度更快

可访问的 React 组件，用于构建高质量的 Web 应用和设计系统。兼容 Next.js RSC

npm i @chakra-ui/react

滑块

密码输入框

Chakra UI 是一个用于构建 Web 应用程序的组件库。

标签页

开关

为现代产品团队打造。
从下一代初创公司到成熟企业，均适用。

设计系统

在 Chakra UI 的基础上构建您的设计系统

减少编写 UI 代码的时间，将更多时间用于为客户构建出色的体验。

设计令牌. 使用语义化设计令牌简化设计决策
排版. 在一个地方定制您的字体相关属性
组件变体方案. 轻松设计组件变体

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

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

export const textStyles = defineTextStyles({
  headline: {
    value: {
      fontSize: "4xl",
      fontWeight: "bold",
    },
  },
  subheadline: {
    value: {
      fontSize: "2xl",
      fontWeight: "semibold",
    },
  },
})

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

export const cardRecipe = defineRecipe({
  base: {
    display: "flex",
    flexDirection: "column",
  },
  variants: {
    variant: {
      primary: {
        bg: "teal.600",
        color: "white",
      },
    },
  },
})