Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Marker
- Menubar
- Message
- Message Scroller
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Questionnaire
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Sections
@shadcn/react
@shadcn/helpers
Utilities
2026 年 1 月 - Base UI ドキュメント
Base UI コンポーネントの完全なドキュメント。
Base UI コンポーネントの完全なドキュメントを出荷しました。
12 月に npx shadcn create をリリースしたとき、コンポーネント ライブラリとして Radix と Base UI のどちらかを選択できる機能を導入しました。今回、そのフォローアップとして、すべての Base UI コンポーネントの完全なドキュメントを公開しました。
新着情報#
- 完全な Base UI ドキュメント - すべてのコンポーネントに、使用法、props、例をカバーする Base UI 専用のドキュメントが含まれるようになりました。
- 再構築されたサンプル - すべてのコンポーネントのサンプルは、Radix UI と Base UI の両方に対して再構築されています。それらを切り替えて実装の違いを確認してください。
- 並べて比較 - このドキュメントを使用すると、両方のライブラリ間でコンポーネントがどのように動作するかを簡単に比較できます。
同じ抽象化、異なるプリミティブ#
目標は変わりません。どのプリミティブ ライブラリを選択しても、一貫した API を提供します。コンポーネントは同じように見え、同じように動作します。基礎となる実装のみが変更されます。
// Works the same whether you're using Radix or Base UI.
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"新しいプロジェクトを開始する場合は、npx shadcn create を実行して、好みのライブラリを選択します。残りは CLI が処理します。
shadcn/create を試してください
shadcn/uiアプリをVercelにデプロイ
OpenAI、Sonos、Adobeなどに採用されています。
Vercelは、アプリや機能を大規模にデプロイするためのツールと インフラを提供します。
Vercelにデプロイ