プロジェクトにYamada UIをインストールして使用する方法。

個別のインストール

最小限のインストール

インストール

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

基本を学ぶ

Yamada UIのテーマ・スタイル・レスポンシブ・ダークモード・アニメーションの応用を学ぶ。

応用を学ぶ

Create React AppのプロジェクトにYamada UIをインストールして使用するためのガイド。

Create React App

Next.jsのプロジェクトへ、Yamada UIをインストールし、使用するためのガイド。

Next.jsではじめる

Next.jsのプロジェクトにYamada UIをインストールして使用するためのガイド。

Next.js

ViteのプロジェクトにYamada UIをインストールして使用するためのガイド。

Vite

RemixのプロジェクトにYamada UIをインストールして使用するためのガイド。

Remix

GatsbyのプロジェクトにYamada UIをインストールして使用するためのガイド。

Gatsby

HonoのプロジェクトにYamada UIをインストールして使用するためのガイド。

Hono

フレームワークごとにYamada UIをインストールして使用する方法。

フレームワーク

はじめる

Yamada UIのStyle propsについて学ぶ。Style propsは、コンポーネントにpropsを渡すだけでコンポーネントのスタイルを変更する方法です。

Style Props

Yamada UIのデフォルトのテーマ。

デフォルトのテーマ

Yamada UIのデフォルトのテーマをカスタマイズする方法。

テーマをカスタマイズする

コンポーネントのスタイルの作成やカスタマイズする方法。

コンポーネントのスタイル

ユーザーがテーマを切り替える方法。

テーマを切り替える

Yamada UIのテーマは、カスタマイズ性があり、アプリケーションのデザインの一貫性を担保します。

テーマ

Yamada UIのデフォルトのコンフィグ。

デフォルトのコンフィグ

Yamada UIのデフォルトのコンフィグをカスタマイズする方法。

コンフィグをカスタマイズする

Yamada UIのコンフィグは、システムのさまざまな部分で使用されるグローバルな設定です。

コンフィグ

Yamada UIは、すぐに使えるレスポンシブスタイルをサポートしています。

レスポンシブスタイル

Yamada UIのすべてのコンポーネントは、ダークモードをサポートしています。

カラーモード

Yamada UIは、CSSのアットルールをサポートしています。

アットルール

Yamada UIは、すぐに使えるアニメーションをサポートしています。

アニメーション

Yamada UIは、すぐに使えるグラデーションをサポートしています。

グラデーション

Yamada UIは、セマンティックトークンをサポートしています。

セマンティックトークン

テキストとレイヤースタイルを使用する方法。

テキストとレイヤースタイル

Yamada UIは、アプリケーションで必要なローディングアニメーションをサポートしています。

ローディング

Yamada UIは、アプリケーションで必要な通知をサポートしています。

通知

Yamada UIのスタイルシステムを有効にしたJSXエレメントを生成する方法。

グローバルスタイルのカスタマイズおよび追加する方法。

グローバルスタイル

リセットスタイルのカスタマイズおよび追加する方法。

リセットスタイル

CLIコマンドを使用して、カスタマイズしたテーマの型を生成する。

Yamada UIのStyle propsやテーマについて学ぶ。Style propsは、コンポーネントにpropsを渡すだけでコンポーネントのスタイルを変更する方法です。

スタイルシステム

`AspectRatio`は、アスペクト比を維持したビデオやマップなどを埋め込むためのコンポーネントです。

AspectRatio

`Box`は、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、`div`要素をレンダリングします。

`Center`は、コンポーネント内の子要素を中央に配置するコンポーネントです。

Center

`Container`は、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、`section`要素をレンダリングします。

Container

`Divider`は、要素間において区切りを表すコンポーネントです。

Divider

`Flex`は、`Box`に`flex`を設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

Flex

`Grid`は、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

Grid

`SimpleGrid`は、`Grid`をより使いやすくシンプルにしたコンポーネントです。

SimpleGrid

`Spacer`は、要素間に空間を追加するために使用するコンポーネントです。

Spacer

`Stack`は、要素をグループ化し、子要素間にスペースを設けるコンポーネントです。

Stack

`Wrap`は、`Flex`に`wrap`を設定したコンポーネントです。`Flex`から便利なスタイルのショートハンドを継承しています。

Wrap

`Box`や`Stack`など、プロジェクトのレイアウトを構築するコンポーネントが用意されています。

レイアウト

`Heading`は、セクションの見出しを表すコンポーネントです。デフォルトでは、`h1`要素をレンダリングします。

Heading

`Highlight`は、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、`p`要素をレンダリングします。

Highlight

`Text`は、テキストの段落を表すコンポーネントです。デフォルトでは、`p`要素をレンダリングします。

Text

`Heading`や`Text`など、プロジェクトのテキストを構築するコンポーネントが用意されています。

タイポグラフィ

`AlphaSlider`は、ユーザーが色の透明度を選択するために使用されるコンポーネントです。

AlphaSlider

`Autocomplete`は、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

Autocomplete

`Button`は、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Button

`Checkbox`は、ユーザーが複数の選択肢の中から複数の値を選択するための使用されるコンポーネントです。

Checkbox

`ColorPicker`は、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

ColorPicker

`DatePicker`は、ユーザーが日付を選択するために使用されるコンポーネントです。

DatePicker

Dropzone`は、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。

Dropzone

`Editable`は、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

Editable

`FileButton`は、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

FileButton

`FileInput`は、ユーザーがファイルを選択するために使用されるコンポーネントです。

FileInput

`FormControl`は、フォーム要素に、ラベル、ヘルプメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

FormControl

`HueSlider`は、ユーザーが色相を選択するために使用されるコンポーネントです。

HueSlider

`IconButton`は、ボタン内にアイコンを表示するコンポーネントです。

IconButton

`Input`は、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Input

`MonthPicker`は、ユーザーが月を選択するために使用されるコンポーネントです。

MonthPicker

`MultiAutocomplete`は、ユーザーのテキスト入力に応じて候補を表示し、複数の値を取得するために使用されるコンポーネントです。

MultiAutocomplete

`MultiDatePicker`は、ユーザーが日付を複数選択するために使用されるコンポーネントです。

MultiDatePicker

`MultiSelect`は、ユーザーがオプションのリストから複数の値を選択するために使用されるコンポーネントです。

MultiSelect

`NativeSelect`は、ユーザーがオプションのリストから1つを選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

NativeSelect

`NumberInput`は、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

NumberInput

`PhoneInput`は、現在作成を検討しています。

PhoneInput

`PinInput`は、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

PinInput

`Radio`は、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

Radio

`RangeDatePicker`は、ユーザーが日付を範囲選択するために使用されるコンポーネントです。

RangeDatePicker

`RangeSlider`は、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。

RangeSlider

`Rating`は、ユーザーが評価を行うために使用させるコンポーネントです。

Rating

`SaturationSlider`は、ユーザーが色の彩度を選択するために使用されるコンポーネントです。

SaturationSlider

`SegmentedControl`は、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

SegmentedControl

`Select`は、ユーザーがオプションのリストから1つを選択するために使用されるコンポーネントです。

Select

`Slider`は、ユーザーが値の範囲から選択するために使用されるコンポーネントです。

Slider

`Switch`は、オンとオフの状態を切り替えるために使用されるコンポーネントです。

Switch

`Textarea`は、複数行のテキスト入力を取得するために使用されるコンポーネントです。

Textarea

`Button`は、オンまたはオフの２つの状態をコンポーネントです。

Toggle

`Input`や`Select`など、プロジェクトのフォームを構築するコンポーネントが用意されています。

フォーム

`Badge`は、アイテムのステータスを強調表示して、すぐに認識できるようにするコンポーネントです。

Badge

`Calendar`は、日付を表示または選択するカレンダーのコンポーネントです。

Calendar

`Card`は、関連する情報をグループ化して表示するコンポーネントです。デフォルトでは、`section`要素をレンダリングします。

Card

`Carousel`は、複数の要素をスライドショーのように表示するコンポーネントです。

Carousel

`ColorPicker`は、色の見本を表示するコンポーネントです。

ColorSwatch

`Dockable`は、現在作成を検討しています。

Dockable

`InfiniteScrollArea`は、無限スクロール機能を提供するコンポーネントです。このコンポーネントは、コンポーネントの終わりに達したときに次のデータセットを自動的に読み込み、表示することで、スムーズなスクロール体験を提供します。

InfiniteScrollArea

`Kbd`は、キーボード入力を表すコンポーネントです。

`List`は、リストを表示するコンポーネントです。デフォルトでは、`ul`要素をレンダリングします。

List

`Markdown`は、マークダウン形式のテキストをレンダリングするコンポーネントです。

Markdown

`NativeTable`は、データを効率的に整理して表示するコンポーネントです。

NativeTable

`PagingTable`は、ページネーション機能を備えたテーブルのコンポーネントです。

PagingTable

`Reorder`は、項目の順序をドラッグアンドドロップで変更できるコンポーネントです。

Reorder

`Resizable`は、キーボードのサポートを備えたサイズ変更可能なレイアウトコンポーネントです。

Resizable

`ScrollArea`は、カスタムされたスクロールバーが表示されるコンポーネントです。

ScrollArea

`Stat`は、数値やデータをボックス内に表示するために使用されます。

Stat

`Table`は、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

Table

`Table`や`Calendar`など、プロジェクトのデータの表示を構築するコンポーネントが用意されています。

データディスプレイ

Yamada UIには、プロジェクトをより迅速に構築できるように事前に構築されたコンポーネントが用意されています。