- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端实验室
34K Star 的UI库，超神了！
Chakra UI Chakra-UI 是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。 安装 # 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 项目地址：https://github.com/chakra-ui/chakra-ui
1.1K30编辑于 2023-09-20 - 来自专栏网络日志
使用Next.js创建Blog
pnpm-lock.yaml ├── public ├── styles └── tsconfig.json 安装依赖 pnpm install globby gray-matter dayjs @chakra-ui } from 'react' import { List, LinkOverlay, ListItem, Container, Heading, Image } from '@chakra-ui 的配置 // pages/_app.js import {ChakraProvider} from '@chakra-ui/react' function MyApp({Component, pageProps ，所以将组件都转成了 chakra-ui 提供的组件，配置如下： import CanIUse from 'components/CanIUse' import {Heading, Link, Box} from '@chakra-ui/react' import {FiExternalLink} from 'react-icons/fi' const components = { CanIUse
1.1K10编辑于 2024-06-12 - 来自专栏开源服务指南
高效 UI 组件，节省开发时间 | 开源专题 No.70
chakra-ui/chakra-uihttps://github.com/chakra-ui/chakra-ui Stars: 35.6k License: MIT chakra-ui 是一个为 React
76910编辑于 2024-04-30 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x5：集成 API 到应用中
/providers/app.tsx import { ReactNode } from "react"; import { ChakraProvider, GlobalStyle } from "@chakra-ui GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Heading, Stack } from "@chakra-ui GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Stack, Button } from "@chakra-ui /react"; import { PlusSquareIcon } from "@chakra-ui/icons"; import { Link } from "@/components/link" 职位创建 // src/features/jobs/components/create-job-form/create-job-form.tsx import { Box, Stack } from "@chakra-ui
2K20编辑于 2023-05-17 - 来自专栏程序那些事儿
如何在 React 中快速实现暗黑模式
第一步 要开始使用 Chakra UI，需要通过在终端中运行以下命令将其安装在项目中： npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 在主题文件中引入 chakra-ui import {extendTheme} from '@chakra-ui/react' 接下来，打开index.css文件。
3.2K30编辑于 2023-07-24 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x2：构建和文档化组件
# 安装及配置 安装： pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion 为了使用 Chakra UI，首先我们需要配置它的主题 src/config/theme.ts 是我们的主题配置文件: import { extendTheme } from "@chakra-ui/react"; const colors = { primary import React, { MouseEventHandler, ReactNode } from "react"; import { Button as ChakraButton } from "@chakra-ui import { FormControl, FormHelperText, FormLabel, forwardRef, Input, Textarea, } from "@chakra-ui import React, { ReactNode } from "react"; import NextLink from "next/link"; import { Button } from "@chakra-ui
1.4K10编辑于 2023-05-17 Chakra UI React组件库入门指南
首先，我们需要安装Chakra UI及其依赖：bashnpm i @chakra-ui/react @emotion/react @emotion/styled framer-motion或者如果你使用 ：```jsximport React from 'react';import { ChakraProvider } from '@chakra-ui/react';function App() { 主题定制Chakra UI的主题系统允许你自定义几乎所有方面，包括颜色、字体、断点等：```jsximport { extendTheme, ChakraProvider } from '@chakra-ui Chakra的组合性使这变得非常简单：```jsximport { Box, forwardRef } from '@chakra-ui/react';const Card = forwardRef(( Chakra UI提供了shouldForwardProp选项来减少不必要的渲染：```jsximport { chakra } from '@chakra-ui/react';// 创建一个只转发特定
56021编辑于 2025-09-25- 来自专栏深入浅出区块链技术
使用 React 和 ethers.js 构建DApp
第 3 步：安装 Chakra UI 通过运行 Chakra UI（文档[8]）来安装： yarn add @chakra-ui/react @emotion/react @emotion/styled next/link" import { Flex, Button, useColorModeValue, Spacer, Heading, LinkBox, LinkOverlay } from '@chakra-ui _app.tsx和布局中添加 Chakra UI Provider 编辑_app.tsx // src/pages/_app.tsx import { ChakraProvider } from '@chakra-ui /layout" import { Text, Button } from '@chakra-ui/react' const Home: NextPage = () => { return ( import React, { useEffect,useState } from 'react' import { Text} from '@chakra-ui/react' interface Props
6.5K31编辑于 2022-11-07 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x6：实现用户认证和全局通知
useLogin hook 来处理登录请求： // src/features/auth/components/login-form/login-form.tsx import { Stack } from "@chakra-ui import type { ReactNode } from "react"; import { useRouter } from "next/router"; import { Flex } from "@chakra-ui src/components/notifications/notifications.tsx import { Flex, Box, CloseButton, Stack, Text } from "@chakra-ui /providers/app.tsx import { ReactNode } from "react"; import { ChakraProvider, GlobalStyle } from "@chakra-ui
2.5K30编辑于 2023-05-17 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x3：构建和配置页面
GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Heading, Stack } from "@chakra-ui GetServerSidePropsContext, InferGetServerSidePropsType } from "next"; import { Stack, Button } from "@chakra-ui pages/dashboard/jobs/index.tsx import { ReactElement } from "react"; import { Heading, HStack } from "@chakra-ui /react"; import { PlusSquareIcon } from "@chakra-ui/icons"; import { Link } from "@/components/link" # 404 页面 // pages/404.tsx import { Center } from "@chakra-ui/react"; import { Link } from "@/components
1.3K20编辑于 2023-05-17 - 来自专栏new
控制样式的组件都在
styles/default.scss：默认样式 /src/web/styles/reset.scss：样式重置 主题配置： 项目使用 Chakra UI 的组件和主题系统，主要通过以下方式定制： @chakra-ui
89510编辑于 2024-12-17 - 来自专栏前端技术江湖
你不知道的33个令人惊艳的React开发库
chakra-ui image.png Chakra UI 是一个简单、模块化且可访问的组件库，为您提供构建 React 应用程序所需的构建块。
3K20编辑于 2023-08-21 - 来自专栏开源服务指南
Chart.js：灵活易用的图表库 | 开源日报 No.121
chakra-ui/panda[5] Stars: 3.7k License: MITPanda 是一个通用的、类型安全的 CSS-in-JS 框架，适用于产品团队。
1.5K10编辑于 2023-12-19 - 来自专栏深入浅出区块链技术
创建一个像Opensea一样的NFT市场
Chakra UI Web3-React ethers.js SWR _app.tsx 内容如下： // src/pages/_app.tsx import { ChakraProvider } from '@chakra-ui web3-react/core' import { Web3Provider } from '@ethersproject/providers' import { Box, Text} from '@chakra-ui import type { NextPage } from 'next' import Head from 'next/head' import { VStack, Heading } from "@chakra-ui import { Contract } from "@ethersproject/contracts"; import { Grid, GridItem, Box, Text, Button } from "@chakra-ui
2.3K50编辑于 2022-11-07 - 来自专栏四楼没电梯
FastGPT如何增减用户
ModalHeader, ModalBody, ModalCloseButton, useDisclosure, useToast, Select, } from '@chakra-ui
1.1K10编辑于 2024-10-12 - 来自专栏code秘密花园
全新的 React 组件设计理念 Headless UI
关于组件库，我目前看到的比较不错的实践就是 Chakra-UI 组件库，整个组件库采用分层架构（这里以数字输入框组件为例）： 「底层」使用 Headless UI 那一套模式，对外暴露相关的 React
2.2K10编辑于 2023-01-09 - 来自专栏前端从进阶到入院
32K star 的 Chakra UI，以及未来的展望
它是开源的，你可以在这里查看：github.com/chakra-ui/a… Ark 在 Chakra UI 中的定位 Zag.js：用于 UI 组件的低级状态机 Ark：基于 Zag.js 的 Headless
1.3K30编辑于 2023-10-14 - 来自专栏深度学习与python
React 困境与未来，何时迎来自己的“Angular.js 时刻”？
如果各位用惯了以下工具，是时候寻找替代方案了： material-ui, chakra-ui, Emotion, styled-components React-query, swr, react-hook-form
1.5K10编辑于 2023-08-09 - 来自专栏前端自习课
【React】1935- 来看看 SWR 如何用 React Hook 实现优雅请求
这里额外提一点，如果你不想在表格每次加载都展示加载动画，比如只有在请求实践超过了 500ms 才响应时展示加载动画，你可以通过防抖来实现： import { Center, Spinner } from '@chakra-ui
2.5K10编辑于 2024-01-29 - 来自专栏AI 技术分享
【AI 学习】AI提示词工程：从入门到实战的全栈指南
AI生成的代码示例如下：展开代码语言：TXTAI代码解释importReact,{useState}from'react';import{Input,Button}from'@chakra-ui/react
3.3K100编辑于 2026-01-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号