Chakra UI v3

組み込みスタイリング、テーマ、デザイントークンを備えたアクセシブルな React コンポーネントライブラリです。

クイックスタート

npm i @chakra-ui/react @emotion/react

# ビルド済みコンポーネントスニペットを追加
npx @chakra-ui/cli snippet add

// components/ui/provider.tsx (CLI で生成)
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'

export function Provider({ children }: { children: React.ReactNode }) {
  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}

// app layout
import { Provider } from '@/components/ui/provider'

export default function RootLayout({ children }) {
  return (
    

...