35.6K star！一款美观简洁高效的 React UI 组件库，好用！

* 戳上方蓝字“开源先锋”关注我

性能特色

支持开箱即用的主题功能：提供了内置的主题功能，让你可以轻松定制界面的样式。你可以根据自己的需求更改主题颜色、字体样式等，以创建符合你品牌形象的独特设计。
默认支持白天和黑夜两种模式：内置了白天和黑夜两种模式，用户可以根据自己的喜好选择适合的模式。这为用户提供了更好的使用体验，同时也方便了开发者进行界面设计。
拥有大量功能丰富且非常有用的组件：提供了许多实用的 UI 组件，涵盖了常见的界面元素和交互组件，如按钮、表单、导航等。这些组件具有良好的可定制性，可以满足各种项目的需求。
使响应式设计变得轻而易举：提供了响应式设计的支持，使得开发者可以轻松地创建适应不同屏幕尺寸的界面。无论是在大屏幕上还是在移动设备上，你的应用都能提供优秀的用户体验。
文档清晰而全面：的文档非常详尽，并且提供了丰富的示例代码和详细的 API 文档，即使是对于新手也能快速上手。

如何快速使用

安装：使用包管理工具（如 Yarn、npm 或 pnpm）安装 Chakra UI 相关依赖：

# with Yarn
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with npm
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

# with Bun
$ bun add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

导入模块：在你的应用程序的根组件中导入 ChakraProvider 模块：

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

// Do this at the root of your application
function App({ children }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

基础使用：导入你需要的组件并在应用程序中使用它们，比如使用 Button 组件：

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

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

是不是很简单！

如果想要切换主题颜色，可使用useColorMode来控制。

再比如我们设计一个表单，Chakra UI 提供了一些易用的表单组件，如：Input、Checkbox、Select等等。

import { FormLabel, FormControl, FormHelperText, Input } from "@chakra-ui/core"

function LoginForm() {
  return (
    <FormControl>
      <FormLabel>email地址</FormLabel>
      <Input type="email" placeholder="Enter email" />
      <FormHelperText>请输入正确的email地址</FormHelperText>
    </FormControl>
  )
}