Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Next.jsではじめる

パッケージをインストールする

まず、アプリケーションを作成します。

ターミナルで次のコマンドのいずれかを実行します。

pnpm create next-app my-app --typescript
Copied!

Yamada UIは、@yamada-ui/reactをインストールするだけで、ほとんどのコンポーネントやフックを使用できます。

pnpm add @yamada-ui/react
Copied!

テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。

pnpm add @yamada-ui/table
Copied!
パッケージ説明
@yamada-ui/table

@tanstack/react-tableを使用した、便利なテーブルコンポーネントを提供します。

@yamada-ui/calendar

dayjsを使用した、便利なカレンダーとデイトピッカーコンポーネントを提供します。

@yamada-ui/carousel

embla-carousel-reactを使用した、便利なカルーセルコンポーネントを提供します。

@yamada-ui/dropzone

react-dropzoneを使用した、便利なドロップゾーンコンポーネントを提供します。

@yamada-ui/charts

rechartsを使用した、便利なチャートコンポーネントを提供します。

@yamada-ui/markdown

react-markdownとreact-syntax-highlighterを使用した、便利なマークダウンコンポーネントを提供します。

@yamada-ui/fontawesome

Font Awesomeを便利に使用するためのコンポーネントを提供します。

UIProviderを追加する

Yamada UIをインストール後、UIProviderを追加します。

layout.tsx

import { UIProvider } from "@yamada-ui/react"


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
Copied!

ColorModeScriptを追加する

カラーモードを正常に動作させるために、body内にColorModeScriptを追加する必要があります。

理由は、カラーモードがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

layout.tsx

import { UIProvider, ColorModeScript } from "@yamada-ui/react"


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ColorModeScript />


        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
Copied!

コンポーネントを使用する

UIProviderを追加したら、アプリケーション内でコンポーネントを呼び出します。

page.tsx

import { Button } from "@yamada-ui/react"


export default function Home() {
  return <Button>Click me!</Button>
}
Copied!

GitHubでこのページを編集する

前Create React App次Vite