プロジェクトに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

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

Separator

`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`は、ユーザーが複数の選択肢の中から1つを選択するための使用されるコンポーネントです。

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

`DataList`は、データ項目のリストを表示するために使用されます。

DataList

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

Card

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

データディスプレイ

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

Task	Title	Status	Priority
TASK-8782	DocumentationYou can't compress the program without quantifying the open-source SSD pixel!	In Progress	Medium
TASK-7878	DocumentationTry to calculate the EXE feed, maybe it will index the multi-byte pixel!	Backlog	Medium
TASK-7839	BugWe need to bypass the neural TCP card!	Todo	High
TASK-5562	FeatureThe SAS interface is down, bypass the open-source pixel so we can back up the PNG bandwidth!	Backlog	Medium
TASK-8686	FeatureI'll parse the wireless SSL protocol, that should driver the API panel!	Canceled	Medium
TASK-1280	BugUse the digital TLS panel, then you can transmit the haptic system!	Done	High
TASK-7262	FeatureThe UTF8 application is down, parse the neural bandwidth so we can back up the PNG firewall!	Done	High
TASK-1138	FeatureGenerating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!	In Progress	Medium
TASK-7184	FeatureWe need to program the back-end THX pixel!	Todo	Low
TASK-5160	DocumentationCalculating the bus won't do anything, we need to navigate the back-end JSON protocol!	In Progress	High
TASK-5618	DocumentationGenerating the driver won't do anything, we need to index the online SSL application!	Done	Medium
TASK-6699	DocumentationI'll transmit the wireless JBOD capacitor, that should hard drive the SSD feed!	Backlog	Medium
TASK-2858	BugWe need to override the online UDP bus!	Backlog	Medium
TASK-9864	BugI'll reboot the 1080p FTP panel, that should matrix the HEX hard drive!	Done	High
TASK-8404	BugWe need to generate the virtual HEX alarm!	In Progress	Low
TASK-5365	DocumentationBacking up the pixel won't do anything, we need to transmit the primary IB array!	In Progress	Low
TASK-1780	DocumentationThe CSS feed is down, index the bluetooth transmitter so we can compress the CLI protocol!	Todo	High
TASK-6938	DocumentationUse the redundant SCSI application, then you can hack the optical alarm!	Todo	High
TASK-9885	BugWe need to compress the auxiliary VGA driver!	Backlog	High
TASK-3216	DocumentationTransmitting the transmitter won't do anything, we need to compress the virtual HDD sensor!	Backlog	Medium

いくつかの例を見てみる

Welcome back!

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

Welcome back!

いくつかの例を見てみる