セットアップの手順

Rabee UIの利用にあたって、Lucide Icons、Class Variance Authority、Tailwind CSSのインストールを行います。セットアップは以下の手順で進めることができます。

1. Lucide Svelteのセットアップ

Rabee UIで使用するLucide Iconsのセットアップを行います。

        yarn add @lucide/svelte

2. Class Variance Authorityのセットアップ

Rabee UIで使用するCVAのセットアップを行います。

        yarn add class-variance-authority

3. Tailwind CSSのセットアップ

Rabee UIはTailwind CSS を基盤として構築されているため、Tailwind CSSのインストールが必要です。
インストール方法はTailwind CSSの公式ガイドを参照してください。

4. CSSファイルのセットアップ

Rabee UI では以下のCSSを利用しています。カラー定義を独立して管理できるよう、rabeeui.css として別ファイルに配置することをおすすめします（app.css に直接書いても動作します）。

rabeeui.css

        @theme {
  /* surface */
  --color-surface: #FFF;
  --color-subtle: #FAFAFA;
  --color-inverse: #18181B;
  --color-muted: #E4E4E7;
  --color-accent: #F4F4F5;
  --color-subarea: #FAFAFA;
  --color-subarea-accent: #F4F4F5;

  /* foreground */
  --color-foreground: #18181B;
  --color-accent-foreground: #18181B;
  --color-muted-foreground: #71717A;
  --color-subtle-foreground: #A1A1AA;
  --color-inverse-foreground: #FAFAFA;
  --color-bright-foreground: #FAFAFA;
  --color-subarea-foreground: #3F3F46;
  --color-subarea-accent-foreground: #18181B;
  --color-link: #2563EB;
  --color-link-visited: #7E22CE;

  /* border */
  --color-border: #E4E4E7;
  --color-input: #E4E4E7;
  --color-ring: #2563EB;

  /* function */
  --color-destructive: #DC2626;
  --color-destructive-foreground: #FEF2F2;
  --color-warning: #FBBF24;
  --color-warning-foreground: #451A03;
  --color-success: #16A34A;
  --color-success-foreground: #F0FDF4;
  --color-primary: #2563EB;
  --color-primary-foreground: #EFF6FF;

  /* overlay */
  --color-overlay-bright: #FFFFFF;
  --color-overlay-dark: #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 {
  html.dark {
    /* surface */
    --color-surface: #09090B;
    --color-subtle: #18181B;
    --color-inverse: #FAFAFA;
    --color-muted: #27272A;
    --color-accent: #27272A;
    --color-subarea: #18181B;
    --color-subarea-accent: #27272A;

    /* foreground */
    --color-foreground: #FAFAFA;
    --color-accent-foreground: #FAFAFA;
    --color-muted-foreground: #A1A1AA;
    --color-subtle-foreground: #71717A;
    --color-inverse-foreground: #18181B;
    --color-bright-foreground: #FAFAFA;
    --color-subarea-foreground: #F4F4F5;
    --color-subarea-accent-foreground: #FAFAFA;
    --color-link: #60A5FA;
    --color-link-visited: #C084FC;

    /* border */
    --color-border: #3F3F46;
    --color-input: #3F3F46;
    --color-ring: #1D4ED8;

    /* function */
    --color-destructive: #B91C1C;
    --color-destructive-foreground: #FEF2F2;
    --color-warning: #F59E0B;
    --color-warning-foreground: #451A03;
    --color-success: #15803D;
    --color-success-foreground: #F0FDF4;
    --color-primary: #1D4ED8;
    --color-primary-foreground: #EFF6FF;

    /* overlay */
    --color-overlay-bright: #FFFFFF;
    --color-overlay-dark: #09090B;
  }
}

app.css で Tailwind と rabeeui.css を読み込みます。

app.css

        @import &#39;tailwindcss&#39;;
@import &#39;./rabeeui.css&#39;;

rabeeui.css を分けない場合は、@import './rabeeui.css'; の代わりに rabeeui.css の内容をコピーして貼り付けてください。

2026年4月28日より前のバージョン（旧カラー命名 base-container-* / base-stroke-* などを使用）から移行する場合は、カラークラス名の移行ガイドを参照してください。

5. さっそく使ってみましょう

気になるコンポーネントを探して、さっそく使いはじめられます。

Button

Input

Switch