实用且美观，一款简单且模块化的UI组件库！

今天给大家推荐下这个 34K Star 的基于 React 的 UI 组件库

Chakra UI

Chakra-UI 是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。

你可以使用 Chakra UI 轻松创建自己的设计系统，也可以只安装其中的一些组件。由于使用了样式道具，自定义组件和主题非常容易，如此我们有更多的时间用于构建出色的用户体验。

特性

支持开箱即用的主题功能

默认支持白天和黑夜两种模式

拥有大量功能丰富且非常有用的组件

使响应式设计变得轻而易举

文档清晰而全面.查找API更加容易

适用于构建用于展示的给用户的界面

如何使用? 1. 安装 # 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 2.导入模块 import { ChakraProvider } from "@chakra-ui/react" // Do this at the root of your application function App({ children }) {   return <ChakraProvider>{children}</ChakraProvider> } 3. 基础使用 import { Button } from "@chakra-ui/react" function Example() {   return <Button>I just consumed some ⚡️Chakra!</Button> }

比如我们想要主题颜色切换，可以使用useColorMode来控制。

import { useColorMode, Button, Text } from '@chakra-ui/react'   const { colorMode, toggleColorMode } = useColorMode() console.log(colorMode, toggleColorMode)   <Text>当前的颜色模式为 {colorMode}</Text> <Button onClick={toggleColorMode}>切换颜色模式</Button>

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

{`import { FormLabel, FormControl, FormHelperText, Input } from "@chakra-ui/core"; function LoginForm() {   return (     <FormControl>       <FormLabel>邮箱地址</FormLabel>       <Input type="email" placeholder="Enter email" />       <FormHelperText>请输入正确的邮箱地址</FormHelperText>     </FormControl>   ) }`}

Chakra UI 是一个高效美观的 React UI 组件库，可以帮助开发者快速构建出高质量的 Web 应用。一键主题切换、灵活的样式管理、方便易用的表单组件、响应式设计支持、自定义主题等等，基本上你需要的功能都能实现。

项目地址： github /chakra-ui/chakra-ui