Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

個別のインストール

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

Yamada UIのコアやユーティリティをインストールします。

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

pnpm add @yamada-ui/core @yamada-ui/theme @yamada-ui/utils
Copied!

次に、プロジェクトに使用したいコンポーネントやフックをインストールしていきます。

ここでは、Boxなどを含んでいる@yamada-ui/layoutsをインストールしてみましょう。

pnpm add @yamada-ui/layouts
Copied!

ThemeProviderを追加する

コアやコンポーネントをインストール後、アプリケーションのルートにThemeProvider, ResetStyle, GlobalStyleを追加し、@yamada-ui/themeからデフォルトのテーマとデフォルトのコンフィグを渡します。もし、あなたのテーマやコンフィグがある場合は、そちらを渡します。

import { ThemeProvider, ResetStyle, GlobalStyle } from "@yamada-ui/core"
import { defaultTheme, defaultConfig } from "@yamada-ui/theme"


const App = () => {
  return (
    <ThemeProvider theme={defaultTheme} config={defaultConfig}>
      <ResetStyle />
      <GlobalStyle />


      <YourApplication />
    </ThemeProvider>
  )
}
Copied!

ダークモードを対応させたい場合は、ColorModeProviderも追加します。

import {
  ThemeProvider,
  ColorModeProvider,
  ResetStyle,
  GlobalStyle,
} from "@yamada-ui/core"
import { defaultTheme, defaultConfig } from "@yamada-ui/theme"


const App = () => {
  return (
    <ThemeProvider theme={defaultTheme} config={defaultConfig}>
      <ColorModeProvider config={defaultConfig}>
        <ResetStyle />
        <GlobalStyle />


        <YourApplication />
      </ColorModeProvider>
    </ThemeProvider>
  )
}
Copied!

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

アプリケーション内でコンポーネントを呼び出します。

import { Box } from "@yamada-ui/layouts"


const Demo = () => {
  return <Box>This is Box</Box>
}
Copied!

これで、Yamada UIのセットアップは完了です！

学習を開始する

Yamada UIを知るために、基本やテーマを学んでみませんか？😎

基本を学ぶ

3分間のチュートリアルを読んで、Yamada UIのテーマ・スタイル・レスポンシブ・ダークモード・アニメーションの基本を学ぶ。

テーマについて学ぶ

Yamada UIのデフォルトのテーマを知り、色・フォント・その他のテーマの値を作成・変更する方法を学ぶ。

コンポーネントを探索する

Yamada UIは、100以上の柔軟性が高いコンポーネントを提供しています。すべてのコンポーネントは、アニメーション・ダークモードをサポートしています。

ソースコードを探索する

Yamada UIのパッケージ・ドキュメントサイトはオープンソースです。Yamada UIを気に入ったら、スターを付けてください。

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

前はじめる次基本を学ぶ