ui は何をしますか？
美しくデザインされたアクセシブルなコンポーネントセットとコード配布プラットフォームです。お気に入りのフレームワークで動作します。オープンソース。オープンコード。
はじめに
shadcn/uiは、依存関係としてダウンロードするパッケージではありません。代わりに、プロジェクトに直接コピー＆ペーストできるコンポーネントのコレクションを提供します。これにより、コンポーネントを完全に制御およびカスタマイズできます。
インストール
npx shadcn-ui@latest init
このコマンドは、components.jsonファイルを設定し、コンポーネントの依存関係をインストールし、CSSを追加します。
コンポーネントの追加
npx shadcn-ui@latest add button
npx shadcn-ui@latest add alert-dialog
npx shadcn-ui@latest add card
コンポーネントは直接components/uiディレクトリに追加されます。
サポートされるフレームワーク
- Next.js
- Vite
- Remix
- Astro
- Laravel
- Gatsby
- その他
主な機能
- アクセシビリティ: すべてのコンポーネントはRadix UIに基づいており、WAI-ARIAガイドラインに従っています。
- カスタマイズ可能: コンポーネントはソースコードとして提供されるため、自由に変更できます。
- TypeScript: 完全な型安全性を提供します。
- ダークモード: ダークモードを完全にサポートします。
- レスポンシブ: すべてのコンポーネントはデフォルトでレスポンシブです。
設定
components.jsonファイルを使用してライブラリを設定できます：
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
利用可能なコンポーネント
完全なリストは、公式コンポーネントドキュメントを参照してください。一般的なコンポーネントは以下の通りです：
- Button
- Input
- Card
- Dialog
- Dropdown Menu
- Form
- Table
- Tabs
- および多数