当前位置：首页 > article >正文

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

article 2025/2/21 8:20:50

今天给大家推荐下这个 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 应用。一键主题切换、灵活的样式管理、方便易用的表单组件、响应式设计支持、自定义主题等等，基本上你需要的功能都能实现。