65

0

Chakra UI

用于 React 应用程序的简单、模块化和可访问的 UI 组件

脉轮标志

快速构建可访问的 React 应用程序⚡️

捆绑大小 语言等级:JavaScript 麻省理工学院许可证 NPM 下载 Github 明星 不和谐

Chakra UI 提供了一组可访问、可重用和可组合的 React 组件,使创建网站和应用程序变得超级容易。

寻找文档?📝

这是最新版本的 Chakra UI 的https://chakra-ui.com网站。对于旧版本,请到这里

特征🚀

  • 易于样式设置:Chakra UI 包含一组布局组件,例如 Box和 Stack,通过传递道具可以轻松设置组件样式。 学到更多
  • 灵活且可组合:Chakra UI 组件构建在 React UI Primitive 之上,具有无限的可组合性。
  • 无障碍。Chakra UI 组件遵循 WAI-ARIA 指南规范并具有正确的 aria-*属性。
  • 黑暗模式😍:Chakra UI 中的大多数组件都兼容暗模式。

支持Chakra用户界面💖

通过捐赠 5 美元或更多,您可以支持该项目的持续发展。我们将不胜感激。感谢我们所有的支持者!🙏 [贡献]

个人

组织

与您的组织一起支持该项目。您的徽标将显示在此处,并带有指向您网站的链接。[贡献]

感言

人们经常向我扔 React 组件库和设计系统。这可能是我见过的最好的一个。API 很简单但可组合,并且我查看的几个组件的可访问性是完整的。

伟大的工作@thesegunadebayo,非常鼓舞人心的工作。– 瑞恩弗洛伦斯

来自@thesegunadebayo 的很棒的新开源组件库。真是令人印象深刻的东西!– 科尔姆图特

这是令人难以置信的工作。了不起的工作Segun!—— 李·罗宾逊

Chakra UI 太棒了!我喜欢始终如一地使用焦点造型和微妙的动画 ——Guillermo ▲

安装Chakra用户界面

要使用 Chakra UI 组件,您需要做的就是安装 @chakra-ui/react包及其对等依赖项:

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

# or

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

用法

要开始使用这些组件,请按照以下步骤操作:

  1. 用@chakra-ui/react ChakraProvider提供的 包装你的应用程序。
import { ChakraProvider } from "@chakra-ui/react"

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

或者,您可以使用 包装您的应用程序,ColorModeProvider以便您可以在应用程序中在明暗模式之间切换。

  1. 现在你可以开始使用这样的组件了!:
import { Button } from "@chakra-ui/react"

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

有关如何开始的更多指南,请 点击此处

CodeSandbox 模板

create-react-app模板

查看我们的指南,了解如何使用我们的官方 create-react-app模板。

贡献

想贡献吗?棒极了!我们有一个 贡献指南来帮助指导您。

我们的 docsite 位于一个 单独的 repo中。如果您有兴趣为文档做出贡献,请查看 docsite 贡献指南