# Rabee UI ドキュメント全文 > このファイルは、AIツールがRabee UIライブラリの全ドキュメントを一度に取得するためのものです。 > 各コンポーネントのプロパティ、使い方、コード例が含まれています。 > サイト: https://rabeeui.com --- # Rabee UI とは Rabee UIは、Svelte × Tailwind CSSで構築された、カスタマイズを前提としたUIコンポーネント集です。必要なUIコンポーネントのコードを自分のプロジェクトにコピーするだけで、素早く、簡単にUIを構築できます。 ![Rabee UI](/images/rabeeui.png) ---- ## Svelte × Tailwind CSSでカスタマイズ Rabee UIは、カスタマイズして使用することを前提とした「UIコンポーネントの種」です。デザインを変更したいときは、Tailwind CSSのクラスを組み合わせるだけで柔軟に調整できます。また、Tailwind CSSの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。 ## コンポーネント単位で使える Rabee UIはUIライブラリではなく、コードをコンポーネント単位でコピー＆ペーストして使える「UIコンポーネント集」です。プロジェクトごとに、必要なUIコンポーネントのみを選んで使うことができます。 ## ダークモード・ライトモードに対応 すべてのコンポーネントがダークモード・ライトモードの切り替えに対応しています。プロダクト立ち上げの段階から、コストをかけずにダークモードを提供することができます。 ## 日本語利用のためのデザイン UIコンポーネントのサイズや余白は、日本語で使ったときに美しく見えるよう調整されています。他言語をベースとしたコンポーネントと比較して、導入や細かなカスタマイズをスムーズに進められます。 ## コードと一致したFigmaファイル 実際のコードと同じ仕様を再現できるFigmaファイルを公開しています。FigmaのVariables機能を活用しており、デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスにつながります。 Figmaデータは[Figma Community](https://www.figma.com/community/file/1479376628733075423/rabee-ui)で確認できます。 ---- ## 最新情報はこちら 最新情報は以下のLP、Discordで公開中です。 - [LP](https://rabeeui.com/) - [Discord](https://discord.gg/VjtgZ4dkQa) --- # セットアップの手順 Rabee UIの利用にあたって、Lucide Icons、Class Variance Authority、Tailwind CSSのインストールを行います。セットアップは以下の手順で進めることができます。 ## 1. Lucide Svelteのセットアップ Rabee UIで使用する[Lucide Icons](https://lucide.dev/guide/packages/lucide-svelte)のセットアップを行います。 ``` yarn add @lucide/svelte ``` ## 2. Class Variance Authorityのセットアップ Rabee UIで使用する[CVA](https://cva.style/docs/getting-started/installation)のセットアップを行います。 ``` yarn add class-variance-authority ``` ## 3. Tailwind CSSのセットアップ Rabee UIはTailwind CSS を基盤として構築されているため、Tailwind CSSのインストールが必要です。 インストール方法は[Tailwind CSSの公式ガイド](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)を参照してください。 ## 4. CSSファイルのセットアップ Rabee UIでは、以下のCSSを利用しています。 以下のコードをCSSファイルに記述してください。 ```less:app.css body { -webkit-font-smoothing: antialiased; } @theme { /* container */ --color-base-container-default: #FFF; --color-base-container-primary: #18181B; --color-base-container-muted: #E4E4E7; --color-base-container-accent: #F4F4F5; --color-base-container-subarea-accent: #F4F4F5; /* foreground */ --color-base-foreground-default: #18181B; --color-base-foreground-accent: #18181B; --color-base-foreground-muted: #71717A; --color-base-foreground-subtle: #A1A1AA; --color-base-foreground-on-fill-inverse: #FAFAFA; --color-base-foreground-on-fill-bright: #FAFAFA; --color-base-foreground-subarea-default: #3F3F46; --color-base-foreground-subarea-accent: #18181B; --color-base-foreground-link: #2563EB; /* stroke */ --color-base-stroke-default: #E4E4E7; /* surface */ --color-base-surface-default: #FFF; --color-base-surface-subarea-default: #FAFAFA; --color-base-surface-muted: #FAFAFA; /* function */ --color-destructive: #DC2626; --color-destructive-on-fill: #FEF2F2; --color-warning: #FBBF24; --color-warning-on-fill: #18181B; --color-success: #16A34A; --color-success-on-fill: #F0FDF4; --color-primary: #2563EB; --color-primary-on-fill: #EFF6FF; /* alpha */ --color-alpha-bright: #FFFFFF; --color-alpha-gloom: #09090B; /* line-height */ --text-xs--line-height: 1.5; --text-sm--line-height: 1.5; --text-base--line-height: 1.5; --text-lg--line-height: 1.5; --text-xl--line-height: 1.5; --text-2xl--line-height: 1.5; --text-3xl--line-height: 1.5; --text-4xl--line-height: 1.5; --text-5xl--line-height: 1.5; --text-6xl--line-height: 1.5; --text-7xl--line-height: 1.5; --text-8xl--line-height: 1.5; --text-9xl--line-height: 1.5; } @layer theme { .dark { /* container */ --color-base-container-default: #09090B; --color-base-container-primary: #FAFAFA; --color-base-container-muted: #27272A; --color-base-container-accent: #27272A; --color-base-container-subarea-accent: #27272A; /* foreground */ --color-base-foreground-default: #FAFAFA; --color-base-foreground-accent: #FAFAFA; --color-base-foreground-muted: #A1A1AA; --color-base-foreground-subtle: #71717A; --color-base-foreground-on-fill-inverse: #18181B; --color-base-foreground-on-fill-bright: #FAFAFA; --color-base-foreground-subarea-default: #F4F4F5; --color-base-foreground-subarea-accent: #FAFAFA; --color-base-foreground-link: #60A5FA; /* stroke */ --color-base-stroke-default: #3F3F46; /* surface */ --color-base-surface-default: #09090B; --color-base-surface-subarea-default: #18181B; --color-base-surface-muted: #18181B; /* function */ --color-destructive: #B91C1C; --color-destructive-on-fill: #FEF2F2; --color-warning: #F59E0B; --color-warning-on-fill: #18181B; --color-success: #15803D; --color-success-on-fill: #F0FDF4; --color-primary: #1D4ED8; --color-primary-on-fill: #EFF6FF; /* alpha */ --color-alpha-bright: #FFFFFF; --color-alpha-gloom: #09090B; } } ``` ## 5. さっそく使ってみましょう 気になるコンポーネントを探して、さっそく使いはじめられます。

Button

Button

Input

Input

Switch

Switch --- # Figma Rabee UIは、Figma Communityでデザインデータを公開しています。デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスにつながります。 ![Figma](/images/figma.png) ---- ## 実装と一致したUIコンポーネントを用意 見た目と機能がコードとほとんど一致したデザインをFigmaデータとして提供しています。たとえば、デザインにボタンコンポーネントを使った場合は、実装者に「Rabee UIのボタンを使っています」と伝えるだけでコミュニケーションが完了します。 ## スタイルはVariables機能で管理 カラー、サイズ、テキストなどのスタイル設定は、FigmaのVariables機能を活用して実際のコードに近い仕様を再現しています。スタイルを変更したいときも、Variablesの編集によってスピーディーに対応できます。 ## エラー、ホバー等のステータスも網羅 それぞれのコンポーネントに対して、HoveredやDisabledなどの必要な状態を完備。デザイン段階でのステータス考慮漏れも削減することができます。 ---- ## Figmaデータのダウンロードはこちら デザインデータは無料で公開中です。現在開発中のコンポーネントのデザインも先行公開しています。 [Figma Community](https://www.figma.com/community/file/1479376628733075423/rabee-ui) --- # Accordion Accordionは、クリックするとコンテンツが展開・折りたためる見出しのリストです。 必要な情報をコンパクトに整理し、ユーザーが見たい内容だけを表示できます。 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` ## プロパティ Accordionは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`title`** | `string` || 見出しの文言を設定できます。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Accordion.svelte
{title} {@render children()}
``` ## 使い方 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` --- ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ここにコンテンツ内容が入ります ``` --- # Badge Badgeは、主に情報を表示するためのコンポーネントです。 必要に応じて、リンクやボタンとして遷移可能なパーツとしても活用できます。 ```svelte バッジ ``` ## プロパティ Badgeは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`tone`** | `string` | `filled` | バッジのトーンを指定します。`filled`, `outlined` のいずれかを選択できます。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Badge.svelte {@render children?.()} ``` ## 使い方 ```svelte バッジ ``` --- ## サンプル ### Default 強調したい情報や目立たせたい要素に使用します。 ```svelte バッジ ``` ### Outlined 情報を控えめに表示したい場合に使用します。 ```svelte バッジ ``` ### Link リンクとして Badge を利用したい場合は、`` タグ等にBadgeのクラスやスタイルを適用することで、同じ見た目を再現できます。 ```svelte バッジ ``` --- # Breadcrumb Breadcrumbは、ユーザーが現在の位置を把握しやすくするための階層型ナビゲーションコンポーネントです。 ```svelte ``` ## プロパティ Breadcrumbは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`items`** | `BreadcrumbItem[]` || 階層の配列を渡します。 | ### BreadcrumbItem BreadcrumbItemは、各階層の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`label`** | `string` || 階層のラベルです。| | **`link`** | `string` || 階層のリンク先です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:modules/Breadcrumb.svelte ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ``` --- # Button Buttonは、押下することで特定の操作を実行するコンポーネントです。 ボタン内部の構造はテキストやアイコン等に柔軟に変更できます。 ```svelte ``` ## プロパティ Buttonは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`variant`** | `string` | `primary` | ボタンのスタイルを指定します。`primary`, `secondary`, `success`, `danger` のいずれかを選択できます。 | | **`size`** | `string` | `medium` | ボタンのサイズを指定します。`small`, `medium`, `large` のいずれかを選択できます。 | | **`tone`** | `string` | `solid` | ボタンのトーンを指定します。`solid`, `ghost` のいずれかを選択できます。 | | **`isSquare`** | `boolean` | `false` | ボタンを正方形にします。 | | **`disabled`** | `boolean` | `false` | ボタンを無効化します。無効化されたボタンはクリックできません。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Button.svelte ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 最も優先度の高いアクションに使うコンポーネントです。 基本的には1画面に1つのみ使用します。 ```svelte ``` ### Disabled 利用不可の状態です。 ```svelte ``` ### Variants ボタンのタイプを変更することもできます。 ```svelte ``` ### Sizes ボタンのサイズを変更することもできます。 ```svelte ``` ### Tones ボタンのトーンを変更することもできます。 ```svelte ``` ### Square ボタンを正方形にすることもできます。 ```svelte ``` ### Click 一般的な` ``` ### With Icon アイコンを追加することもできます。 ```svelte ``` ### Loading ローディング状態です。 ```svelte ``` ### Only Style `` タグ等に Buttonのクラスやスタイルのみを適用することで、同じ見た目を再現できます。 ```svelte a タグ ``` ### Toggle Button フラグで variant 属性や中身のコンテンツを切り替えることで Toggle Button を実現することができます。 ```svelte ``` --- # Calendar Calendarは、日付の表示や選択ができるコンポーネントです。 ```svelte ``` ## プロパティ Calendarは、以下のプロパティをサポートしています。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`value`** | `string` | `''` | 日付(YYYY-MM-DD)を渡すことができます。 | | **`min`** | `string` | `0001-01-01` | 選択できる最小値を設定できます。 | | **`max`** | `string` | `9999-12-31` | 選択できる最大値を設定できます。 | | **`start`** | `string` | `''` | 範囲選択の開始日を指定できます。 | | **`end`** | `string` | `''` | 範囲選択の終了日を指定できます。 | | **`months`** | `number` | `1` | 表示する月数を指定できます。 | | **`enableRange`** | `boolean` | `false` | 範囲選択が可能になります。 | | **`onChange`** | `(value: string) => void` || 日付が選択されたときのコールバック関数です。 | | **`onRangeChange`** | `(value: CalendarRange) => void` || 日付が範囲選択されたときのコールバック関数です。 | **`autoFocusDate`** | `boolean` | `false` | 日付に自動でフォーカスします。 ### CalendarDate CalendarDateは、1日分の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`value`** | `number` || 日付（数値）です。| | **`outOfMonth`** | `boolean` || 表示範囲外の月かどうか。 | | **`disabled`** | `boolean` || 選択できるかどうか。 | | **`formatDate`** | `string` || フォーマット済みの日付文字列です。 | ### CalendarRange CalendarRangeは、範囲選択された日付の情報を表すオブジェクトです。 | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`start`** | `string` | `''` | 開始日です。| | **`end`** | `string` | `''` | 終了日です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:modules/Calendar.svelte {#if type === 'date'} {#each calendars as calendar} {@const year = calendar.year} {@const month = calendar.month} {@const year_disabled = yearDisabled(year)} {@const month_disabled = monthDisabled(month)} {/each} {:else if type === 'month'} {@const year = displayDate.getFullYear()} {@const disabled = yearDisabled(year)} {:else}

{yearLabel}

{/if} {#each Array(months) as _} {#each WEEK_DAYS as week} {week} {/each} {/each} {#if type === 'date'} {#each calendars as calendar} {#each calendar.weeks as week} {#each week as day} selectDate(day)} onkeydown={(e) => onKeyDownDay(e, day)} onfocus={() => { beforeSelectDate = new Date(day.date); }} onblur={() => { beforeSelectDate = null; }} onmouseenter={() => { beforeSelectDate = new Date(day.date); }} onmouseleave={() => { beforeSelectDate = null; }} > {day.value} {/each} {/each} {/each} {:else} {#if type === 'month'} {#each Array(DISPLAY_MONTH_NUM) as _, m} {@const isDisabled = monthDisabled(m)} changeDisplayMonth(m)} onkeydown={(e) => onKeyDownMonth(e, m)}>

{m + 1}月

{/each} {:else if type === 'year'} {#each yearRange as y} {@const year_disabled = yearDisabled(y)} changeDisplayYear(y)} onkeydown={(e) => { onKeyDownYear(e, y); }}>

{y}

{/each} {/if} {/if} ``` ## 使い方 ```svelte ``` --- ## サンプル ### Default 日付を表示・選択できます。 ```svelte ``` ### Min・Max 選択可能な範囲を指定できます。 ```svelte ``` ### Date 指定の日付を渡すことができます。 ```svelte ``` ### Range 日付を範囲選択することができます。 ```svelte ``` ### Month 表示する月数を指定することができます。 ```svelte ``` ### OnChange コールバック関数で値を受け取ることができます。 ```svelte ``` ### With Input InputDateとも組み合わせることができます。 ```svelte {#snippet endContent()} {/snippet} {#if isCalendarOpen} {/if} ``` --- # Card Cardは、コンテンツを整理し、視覚的にグループ化するためのコンポーネントです。 ```svelte

ここに要素が入ります。

 ``` ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Card.svelte {@render children?.()} ``` ## 使い方 ```svelte

タイトル

ここに補足文が入ります。

 ``` --- ## サンプル ### Image 画像を使ったサンプルです。 ```svelte

タイトル

ここに補足文が入ります。

 ``` ### Form 入力要素を使ったサンプルです。 ```svelte
e.preventDefault()}> タイトル

ここに補足文が入ります。

{#if indeterminate} {:else} {/if} ``` ## 使い方 ```svelte ``` ## サンプル ### Default 特に操作が行われていない、デフォルトの状態です。 ```svelte ``` ### Error 入力内容に問題があり、エラーが表示されている状態です。 ```svelte ``` ### Disabled 利用不可の状態です。 ```svelte ``` ### Indeterminate 一部のみ選択された状態や、不確定な状態を示します。 ツリービューで親が一部の子だけ選ばれている場合などに使用されます。 ```svelte ``` ### Group `bind:group`を使うことで、複数のチェックボックスをグループ化し、同じ値を共有できます。 これにより、複数のチェックボックスの状態を一括で管理できます。 ```svelte ``` --- # Combobox Comboboxは、入力フィールドと候補リストを組み合わせて、ユーザーがテキスト入力または候補の選択によって値を指定できるコンポーネントです。 検索やフィルタリングによって、効率的に目的の項目を探すことができます。 ```svelte ``` ## プロパティ | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`options`** | `ComboboxOption[]` | | 選択肢の配列です。 | | **`placeholder`** | `string` | `プレースホルダー` | 入力欄のプレースホルダーです。 | | **`disabled`** | `boolean` | `false` | コンボボックスを無効化します。無効化されたコンボボックスは選択できません。 | | **`isError`** | `boolean` | `false` | エラー状態を視覚的に示します。バリデーション用など。 | | **`multi`** | `boolean` | `false` | `true` にすると複数選択が可能になります。 | | **`open`** | `boolean` | `false` | コンボボックスの候補リストの開閉状態を制御します。 | | **`showSelect`** | `boolean` | `false` | 選択した値を表示します。(multiと併用で複数選択表示可能) | ### ComboboxOptionItem | 名前 | 型 | デフォルト値 | 説明 | | --- | --- | --- | --- | | **`label`** | `string` | | 選択肢のラベルです。 | | **`value`** | `string \| number` | | 選択肢の値です。 | ## インストールの手順 以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。 パスは実際のプロジェクトの構成にあわせて更新します。 ```svelte:atoms/Combobox.svelte { if (!open) openListbox(); }} onfocus={async () => { if (!open) await openListbox(); }} > {#if multi && showSelect && selectedOptions.length} {#each selectedOptions as selected} {selected.label} {/each} {/if} 0 ? selectedLabel : query} oninput={(e) => { query = (e.target as HTMLInputElement).value; }} onfocus={async () => { if (!open) await openListbox(); }} {placeholder} {disabled} /> {#if !multi && showSelect && value.length > 0} {:else} {/if} {#if open} {#if showScrollButtons} {#if !isScrolledToTop} startScroll('up')} onmouseleave={stopScroll}>