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

インストール

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

基本を学ぶ

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

応用を学ぶ

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

Create React App

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のすべてのコンポーネントは、ダークモードをサポートしています。

カラーモード

Yamada UIでCSSカスタムプロパティ(変数)を作成・参照する方法。

CSSカスタムプロパティ(変数)

Yamada UIは、CSS値関数をより便利にした様々な関数を提供しています。

CSS値関数

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

アットルール

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

アニメーション

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

ローディング

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

通知

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

Yamada UIでCSSカスタムプロパティ(変数)に簡単にアクセスできる方法。

インターポレーション

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

グローバルスタイル

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

リセットスタイル

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

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

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

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

スタイルシステム

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

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

Stack

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

Container

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

Flex

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

Wrap

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

Center

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

Grid

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

SimpleGrid

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

Spacer

`Bleed`は、要素をコンテナの境界から外すために使用されるコンポーネントです。

Bleed

`Float`は、要素をコンテナの端に固定するために使用されるコンポーネントです。

Float

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

Divider

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

AspectRatio

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

レイアウト

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

Text

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

Heading

`Blockquote` は引用を表すコンポーネントです。デフォルトでは `blockquote` 要素をレンダリングします。

Blockquote

`Em`は強調されたテキストを表すコンポーネントです。デフォルトでは、`em`要素をレンダリングします。

`Code` はコードブロックを表すコンポーネントです。デフォルトでは `code` 要素をレンダリングします。

Code

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

Highlight

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

タイポグラフィ

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

FormControl

`Fieldset`は、フィールドセット要素に、レジェンド、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

Fieldset

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

Button

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

IconButton

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

Input

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

NumberInput

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

PasswordInput

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

PinInput

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

PhoneInput

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

Textarea

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

Radio

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

RadioCard

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

Checkbox

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

CheckboxCard

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

Switch

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

Toggle

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

Select

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

MultiSelect

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

NativeSelect

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

Autocomplete

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

MultiAutocomplete

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

DatePicker

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

MultiDatePicker

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

RangeDatePicker

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

TimePicker

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

MonthPicker

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

YearPicker

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

ColorPicker

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

FileInput

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

FileButton

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

Dropzone

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

Slider

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

RangeSlider

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

HueSlider

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

AlphaSlider

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

SaturationSlider

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

Editable

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

Rating

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

SegmentedControl

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

フォーム

`Tag`は、アイテムを説明するキーワードを使用して分類または整理するコンポーネントです。

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

Badge

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

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

List

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

Card

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

Stat

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

Table

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

データディスプレイ

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

いくつかの例を見てみる

Playground

Share preset

いくつかの例.css-11xuher{display:inline;}@media screen and (max-width: 768px){.css-11xuher{display:none;}}を見てみる

Playground

いくつかの例を見てみる