Web Design System

一貫性があり、アクセシブルで、使いやすいUIコンポーネントで、高品質なWebアプリケーションを迅速に構築できます。

利用可能なコンポーネント

ボタン

プライマリー、セカンダリー、危険など、様々なスタイルとサイズのボタンコンポーネント

3種類 3サイズ アクセシブル

入力フィールド

テキスト、メール、パスワード入力、ラベル、エラーハンドリング機能付き

フォーム対応 エラー処理 バリデーション

テキストエリア

複数行テキスト入力、文字数制限、リサイズ制御機能付きのテキストエリア

複数行 文字数制限 リサイズ

セレクト

選択肢から項目を選ぶドロップダウン、検索、複数選択対応

ドロップダウン 検索 複数選択

フォームコントロール

チェックボックス、ラジオボタンなど、ユーザーの選択を受け取るフォーム要素

選択 複数対応 フォーム

バッジ

ステータス、ラベル、カウント表示用の小さなコンポーネント

ステータス 通知 タグ

リンク

ナビゲーションや外部サイトへのスタイリッシュなリンクコンポーネント

ナビゲーション 外部リンク アイコン

ツールチップ

ホバー・フォーカス時に表示される情報ポップアップ、位置制御対応

ポップアップ 位置制御 アニメーション

プログレス・スピナー

進捗状況とローディング状態表示、アニメーション効果付き

進捗バー スピナー アニメーション

アバター

ユーザー表示、プロフィール画像、ステータス・グループ表示対応

プロフィール ステータス グループ

カード

関連する情報をグループ化して表示する、柔軟なコンテナコンポーネント

レイアウト インタラクティブ 多用途

使い方

1

コンポーネントを選択

必要なUIコンポーネントを上記から選択してください

2

コードをコピー

各ページでサンプルコードをコピーして利用してください

3

プロジェクトに統合

TailwindCSSクラスをそのままプロジェクトで使用できます