ピン留めされたアイテム

Chakra UIの設計原則

Chakra UI is established on principles that keep its components fairly consistent. Understanding these concepts will help you better contribute to Chakra UI.

Chakra UI公式ドキュメントの設計原則のページでは、Chakra UIがそのコンポーネントを比較的一貫したものに保つことが大切な考え方に基づいていることが説明されている。

dev8 14日前に更新

Next.jsにChakra UIを導入

1. Chakra UIをインストール

プロジェクトのルートディレクトリで以下のコマンドを実行しChakra UIをインストールする。

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

dev8 14日前

2. Chakra UIを利用できるようにする

ChakraProviderを使ってChakra UIのコンポーネントを利用できるように設定する。

// pages/_app.js

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

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

dev8 14日前

3. 使う

これでNext.jsのアプリでChakra UIを使えるようになったので、こんな風にコードを書く。

// pages/index.js

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

export default function Home() {
  return (
    <div>
      <Heading>Welcome to Chakra UI</Heading>
      <Button colorScheme="blue">Get Started</Button>
    </div>
  );
}

dev8 14日前に更新

公式ドキュメント

結局は公式ドキュメントが一番役に立つ。

CSSを指定するのが簡単すぎて今までHTMLとCSSをそのまま書いていたのが信じられません。
個人的にApp Routerを使っても使っていなくても使えるのが便利だと感じました。

このスクラップは14日前にクローズされました