菜单
Chakra UI v3 — accessible React component library rebuilt on Panda CSS for zero-runtime styles (40k stars, active 2026). v3 is a breaking rewrite from v2 with new API (Field vs FormControl, style props via recipe). Covers install, v2 vs v3 differences, component patterns, and theme customization.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | chakra-ui |
| description | Chakra UI v3 — accessible React component library rebuilt on Panda CSS for zero-runtime styles (40k stars, active 2026). v3 is a breaking rewrite from v2 with new API (Field vs FormControl, style props via recipe). Covers install, v2 vs v3 differences, component patterns, and theme customization. |
{% raw %}
Source: chakra-ui/chakra-ui · 40k ⭐ · v3.x · 🟢 active 2026 NPM:
@chakra-ui/react(v3) · pairs with@chakra-ui/cliDocs: https://chakra-ui.com/
<Button p={4} bg="blue.500">) over classNamev3 is a breaking rewrite:
| v2 | v3 |
|---|---|
| Emotion runtime | Panda CSS (zero runtime) |
FormControl + FormLabel + FormErrorMessage | Field unified API |
<ChakraProvider theme={...}> | <ChakraProvider value={system}> |
extendTheme() | createSystem() |
useColorMode() | next-themes or useColorMode from v3 |
If you're on v2: migration is non-trivial. Evaluate whether the perf win is worth the effort. v2 still receives security fixes for now.
npm install @chakra-ui/react @emotion/react
// app/providers.tsx
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return (
<html suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
Form: Button · IconButton · Input · Textarea · Select · Checkbox · Radio · Switch · Slider · Field (unified wrapper) · NumberInput · PinInput · Editable · Filter · Upload · RatingGroup · Combobox
Layout: Box · Flex · Grid · GridItem · Stack (VStack, HStack) · Container · Center · AbsoluteCenter · AspectRatio · SimpleGrid · Wrap
Display: Avatar · Badge · Card · Code · Heading · Image · List · Table · Tag · Text · Icon · Stat · EmptyState
Navigation: Breadcrumb · Link · Tabs · Pagination · Steps
Overlay: Alert · AlertDialog · Dialog · Drawer · HoverCard · Menu · Popover · Toast · Tooltip · Accordion · Collapsible
Feedback: Progress · Spinner · Skeleton · CircularProgress
import { Button } from '@chakra-ui/react';
<Button colorPalette="blue" onClick={save}>Save</Button>
<Button colorPalette="red" variant="outline">Cancel</Button>
<Button loading loadingText="Saving...">Submit</Button>
<Button size="lg">Large</Button>
import { Field, Input, Button, Stack } from '@chakra-ui/react';
<Stack gap={4} as="form" onSubmit={onSubmit}>
<Field.Root required invalid={!!errors.email}>
<Field.Label>
Email <Field.RequiredIndicator />
</Field.Label>
<Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
<Field.HelperText>We'll never share your email.</Field.HelperText>
<Field.ErrorText>{errors.email}</Field.ErrorText>
</Field.Root>
<Button type="submit" colorPalette="blue">Sign in</Button>
</Stack>
import { Dialog, Portal, Button } from '@chakra-ui/react';
<Dialog.Root>
<Dialog.Trigger asChild>
<Button>Delete</Button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Are you sure?</Dialog.Title>
<Dialog.CloseTrigger />
</Dialog.Header>
<Dialog.Body>
This action cannot be undone.
</Dialog.Body>
<Dialog.Footer>
<Dialog.ActionTrigger asChild>
<Button variant="outline">Cancel</Button>
</Dialog.ActionTrigger>
<Dialog.ActionTrigger asChild>
<Button colorPalette="red">Delete</Button>
</Dialog.ActionTrigger>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
import { Table } from '@chakra-ui/react';
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeader>Name</Table.ColumnHeader>
<Table.ColumnHeader>Email</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{users.map((u) => (
<Table.Row key={u.id}>
<Table.Cell>{u.name}</Table.Cell>
<Table.Cell>{u.email}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
One of Chakra's signature features — pass design tokens directly as props:
<Box
p={4}
bg="gray.100"
borderRadius="md"
_hover={{ bg: 'gray.200' }}
_dark={{ bg: 'gray.800' }}
>
Content
</Box>
import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';
const config = defineConfig({
theme: {
tokens: {
colors: {
brand: {
50: { value: '#fef2f2' },
500: { value: '#fa2c19' },
900: { value: '#7f1d1d' },
},
},
},
semanticTokens: {
colors: {
primary: { value: '{colors.brand.500}' },
},
},
},
});
const system = createSystem(defaultConfig, config);
<ChakraProvider value={system}><App /></ChakraProvider>
Use next-themes:
npm install next-themes
import { ThemeProvider } from 'next-themes';
<ThemeProvider attribute="class" defaultTheme="system">
<ChakraProvider value={defaultSystem}>
{children}
</ChakraProvider>
</ThemeProvider>
<ChakraProvider theme={...}> — that's v2. Use value={system}FormControl / FormLabel / FormErrorMessage in v3 — use Field compound<Portal> around Dialog content — breaks positioningcolorPalette="brand" + token references- [ ] Chakra v3 installed (not v2)
- [ ] <ChakraProvider value={system}> wrapping root
- [ ] Forms use <Field.Root> pattern (not FormControl)
- [ ] Dark mode via next-themes + attribute="class"
- [ ] Custom brand tokens via createSystem + defineConfig
- [ ] Using colorPalette="..." instead of hardcoded color props
- [ ] Compound components wrapped in <Portal> where required (Dialog, Popover, etc.)
formality: 6 · motion: 4 · density: 5 · warmth: 5 · contrast: 6
{% endraw %}
Based on Google Stitch DESIGN.md methodology and 58 world-class brand design systems (Apple, Tesla, Stripe, Vercel, Linear, Airbnb, Spotify, Notion, etc.), this skill provides a complete framework for AI agents to generate production-grade UI with distinctive aesthetic quality. Covers design analysis, DESIGN.md creation, and pixel-perfect implementation across all frontend platforms.
OpenAI GPT Image 2 skill for production visual asset generation and editing. Covers Image API vs Responses API selection, prompt-to-asset workflows, high-fidelity edits, output sizing, compression, moderation, cost controls, and DesignDNA-ready asset handoff.
Ant Design Pro — enterprise React admin scaffold + pro-components library. Scaffold (37k stars) gives a full B2B admin starter with layouts, routes, authentication, i18n. Pro-components (4k stars) provides high-level business components (ProTable, ProForm, ProLayout, ProDescriptions). Both active through 2026.
Ant Design (antd) React component library skill — Alibaba's flagship enterprise React UI (97k+ stars, v6.x, active). The de-facto standard for B2B admin/dashboard in China and widely used globally. Covers 60+ components with Form/Table patterns, v6 CSS-variable theming, App/ConfigProvider usage, @ant-design/cli, and v5 → v6 migration notes.
Ant Design X — Alibaba's React AI/LLM conversation UI library (active v2.x). Purpose-built for AI copilot / chatbot interfaces with streaming, message bubbles, sender input, suggestions, prompts, and thought processes. The React equivalent of TDesign Chat.
TDesign Vue Next Chat — Tencent's official AI/LLM conversation UI component package for Vue 3 (part of tdesign-vue-next monorepo, active v0.5.x). Covers Chatbot/Chat primitives, streaming message rendering, Markdown + code-block support, AG-UI or custom SSE service protocols, tool-call/thinking UI, and AI copilot interface patterns.