84,621
返回集成

Chakra UI

SOLQ UI 的官方 Storybook 插件

在 Github 上查看

Chakra UI 是一个全面且易用的 React 组件库，包含可重用且可组合的组件，简化了现代 Web 应用和网站的开发。该库提供种类丰富的组件，可以轻松组合构建复杂的用户界面，同时遵循最佳的可访问性实践。

目录

文档

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

特性

  • 轻松设置样式：Chakra UI 包含一组布局组件，如 Box 和 Stack，通过传递 props 可以轻松设置组件样式。 了解更多
  • 灵活且可组合：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 包裹您的应用程序，以便在应用程序中切换明暗模式。

  1. 现在您可以像这样开始使用组件了！
import { Button } from "@chakra-ui/react"

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

更多入门指南请访问 此处

CodeSandbox 模板

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

制作方
  • bkdev
    bkdev
与以下内容一起使用
    React
标签
如何安装插件 创建插件