はじめに
近年、従来のnpmインストール型UIライブラリとは異なる「コピー&ペースト型」のアプローチが注目を集めています。Shadcn-svelteとRabee UIは、どちらもこの新しいコンセプトを採用しており、どちらもSvelteフレームワークを対象としています。
この記事では、両ライブラリの特徴と違いを比較していきます。
基本概要
Shadcn-svelte
- フレームワーク: Svelte
- 技術スタック: Svelte + Tailwind CSS
- コンセプト: コンポーネントの完全な所有権
Rabee UI
- フレームワーク: Svelte
- 技術スタック: Svelte + Tailwind CSS
- コンセプト: コンポーネントシード（種）
共通理念：「ライブラリではない」
両ライブラリとも、従来のUIライブラリとは根本的に異なるアプローチを採用しています。
従来の方法:
npm install @mui/material
新しいアプローチ:
# Shadcn-svelteのbuttonコンポーネントをプロジェクトへ追加
npx shadcn-svelte@latest add button
# Rabee UI
# 公式サイトからコードをコピペ
主な共通点
| 特徴 | 説明 |
|---|---|
| ソースコード提供 | コンポーネントのコードを直接プロジェクトに配置 |
| 完全なカスタマイズ | コードを自由に編集可能 |
| 依存関係なし | ライブラリ自体はpackage.jsonに追加されない |
| Tailwind CSS | スタイリングに Tailwind CSS を使用 |
主要な違い
1. 対象フレームワーク
Shadcn-svelte (Svelte)
<script>
import Button from '$lib/components/ui/button.svelte'
</script>
<Button onclick={() => console.log("clicked")}>
ログイン
</Button>
Rabee UI (Svelte)
<script>
import Button from '$lib/components/ui/Button.svelte'
</script>
<Button onclick={() => console.log("clicked")}>
ログイン
</Button>
2. 導入方法
| Shadcn-svelte | Rabee UI | |
|---|---|---|
| セットアップ | CLI （npx）で自動化 | 手動でコピペ |
| コマンド | npx shadcn-svelte@latest init |
なし |
| コンポーネント追加 | npx shadcn-svelte@latest add button |
公式サイトからコピー |
3. エコシステムとサポート
| 項目 | Shadcn-svelte | Rabee UI |
|---|---|---|
| コンポーネント数 | 40+ | 24種類 |
| ドキュメント | 充実 | 基本的 |
| コミュニティ | 中規模 | 小規模 |
| GitHub Stars | 4k+ | 数百 |
| 日本語対応 | 英語中心 | 日本語最適化 |
4. 技術的な違い
Shadcn-svelte の特徴:
- Svelteの軽量性とパフォーマンス
- TypeScript 完全対応
- 複雑なコンポーネント（Calendar、Command 等）
- アクセシビリティ対応
Rabee UI の特徴:
- Svelteの軽量性を活用
- 日本語フォント・レイアウト最適化
- Figma デザインファイル提供
- シンプルで直感的なコンポーネント
コンポーネントコードの比較
ボタンコンポーネント
Shadcn-svelte:
<!-- components/ui/Button.svelte -->
<script lang="ts">
import { cn } from '$lib/utils'
import { buttonVariants } from './button'
import type { ButtonProps } from './button'
type $$Props = ButtonProps
export let variant: $$Props['variant'] = 'default'
export let size: $$Props['size'] = 'default'
export let className: $$Props['class'] = ''
</script>
<button
class={cn(buttonVariants({ variant, size, className }))}
onclick
{...$$restProps}
>
<slot />
</button>
Rabee UI:
<!-- Button.svelte -->
<script>
export let variant = 'primary'
export let size = 'md'
export let disabled = false
</script>
<button
class="btn {variant} {size}"
{disabled}
onclick
>
<slot />
</button>
どちらを選んだらいいの？
Shadcn-svelte が適しているケース
- Svelteプロジェクトで開発している
- 豊富なコンポーネントが必要
- CLIによる効率的な開発を求める
- TypeScript対応が必要
- 複雑なUIパターンが必要
Rabee UI が適しているケース
- Svelteプロジェクトで開発している
- 日本語サイトを構築している
- シンプルで軽量なコンポーネントで十分
- Figmaとの連携を重視する
- 学習コストを抑えたい
まとめ
Rabee UI と Shadcn-svelte は、「コピー&ペースト型」という同じ理念を持ち、どちらもSvelteフレームワークをターゲットとしています。
- CLI重視・豊富なコンポーネント: Shadcn-svelte
- 日本語最適化・シンプルさ重視: Rabee UI
どちらも従来のUIライブラリが抱えていた「カスタマイズの制約」や「ブラックボックス化」の問題を解決する革新的なアプローチを提供しています。メンテナンスコストが上がるリスクもありますが、コンポーネントをゴリゴリにカスタマイズしたい方にオススメです。