Saas UI

Chakra UI 是一套全面的可访问、可重用和可组合的 React 组件库，它简化了现代 Web 应用程序和网站的开发。该库提供了各种各样的组件，可以轻松地组合起来构建复杂的用户界面，同时遵循可访问性最佳实践。

目录

• 📋 文档
• 🚀 功能
• 📦 安装
• 💻 使用
• 📚 CodeSandbox 模板
• 📖 create-react-app 模板
• 📝 贡献
• 💖 支持
• 🙌 评价
• 🏆 奖项和提及
• ✨ 贡献者
• ⚖️ 许可证

文档

这是 https://chakra-ui.com 网站，用于获取 Chakra UI 的最新版本。对于旧版本，请访问此处

• v2: https://v2.chakra-ui.com
• v1: https://v1.chakra-ui.com
• v0: https://v0.chakra-ui.com

功能

• 轻松的样式设置：Chakra UI 包含一组布局组件，如 Box 和 Stack，通过传递属性可以轻松地为组件设置样式。了解更多
• 灵活和可组合：Chakra UI 组件构建于 React UI 原语之上，可实现无限组合。
• 可访问性。Chakra UI 组件遵循 WAI-ARIA 指南规范，并具有正确的 aria-* 属性。
• 暗黑模式 😍：Chakra UI 中的大多数组件都与暗黑模式兼容。

安装

要使用 Chakra UI 组件，您只需安装 @chakra-ui/react 包及其对等依赖项

# with Yarn
$ yarn add @chakra-ui/react @emotion/react

# with npm
$ npm i @chakra-ui/react @emotion/react

# with pnpm
$ pnpm add @chakra-ui/react @emotion/react

# with Bun
$ bun add @chakra-ui/react @emotion/react

使用

要开始使用组件，请执行以下步骤

1. 使用 @chakra-ui/react 提供的 ChakraProvider 包裹您的应用程序。

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

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

可选地，您可以使用 ColorModeProvider 包裹您的应用程序，以便在应用程序中切换明暗模式。

2. 现在您可以像这样开始使用组件！

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

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

有关如何入门的更多指南，请访问 此处

CodeSandbox 模板

• JavaScript 初学者：https://codesandbox.io/s/chakra-ui-javascript-lzzg9
• TypeScript 初学者：https://codesandbox.io/s/chakra-ui-typescript-pomi8
• NextJS TypeScript 初学者：https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

create-react-app 模板

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

贡献

想贡献？ 太棒了！我们有一个 贡献指南 来帮助您。

我们的文档网站位于一个 单独的仓库 中。如果您有兴趣为文档做出贡献，请查看 文档网站贡献指南。

支持 Chakra UI

组织

通过您的组织支持此项目。您的徽标将显示在此处，并链接到您的网站。[贡献]

个人

通过捐赠 5 美元或更多，您可以支持该项目的持续开发。我们将感谢您的支持。感谢所有支持者！ 🙏 [贡献]

评价

人们经常向我推荐 React 组件库和设计系统。这可能是迄今为止我见过的最好的一个。API 简洁但可组合，我查看过的几个组件的可访问性是完备的。

@thesegunadebayo 做得很好，非常鼓舞人心。 – Ryan Florence

来自 @thesegunadebayo 的一个很棒的新开源组件库。真的很棒！ – Colm Tuite

这是一项令人难以置信的工作。Segun 干得漂亮！ – Lee Robinson

Chakra UI 太棒了！我喜欢一致的焦点样式和微妙的动画 – Guillermo ▲

奖项和提及

我们很荣幸能够因 Chakra UI 带来的所有创新和在 JavaScript 生态系统中的影响而获得社区的奖项和提及。

贡献者

感谢这些很棒的人

(表情符号键)

这个项目遵循 all-contributors 规范。欢迎任何形式的贡献！

测试由以下人员提供支持

许可证

MIT © Segun Adebayo