- 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
2026 年 5 月 - Rhea の紹介
よりコンパクトな Luma。間隔が狭い。より緻密な表面。焦点を絞った製品インターフェイス向けに構築されています。
新しい shadcn/ui スタイルである Rhea を紹介します。よりコンパクトな Luma。間隔が狭い。より緻密な表面。焦点を絞った製品インターフェイス向けに構築されています。

shadcn/create で Rhea を試してみる
Rhea は、私たちがよく聞いてきた単純なリクエストから始まりました。「Luma ですが、よりコンパクトです。」人々が新しいスタイルをどのように利用しているのか、何を求めているのかを調査したところ、そのパターンは明らかでした。多くのチームが、間隔が狭く、コントロールが小さく、情報密度が高い Luma の柔らかさと形状を望んでいました。
Rhea は、同じ丸い基盤を維持しながら、スペースが重要な製品インターフェイスに合わせてよりコンパクトにします。ボタン、入力、メニュー、カード、リストはすべて少しタイトに配置されているため、UI は混雑を感じることなく、より多くのものを表示できます。
なぜ新しいスタイルなのか?#
これを Luma の間隔調整にすることも検討しましたが、--spacing は乗数です。これを変更すると、アプリ全体での使い慣れたユーティリティの意味が変わります。p-2、w-4、および m-16 は同じサイズを意味しなくなりました。
そのトレードオフは間違っていると感じました。コンパクトさによって、Tailwind の間隔スケールを再学習したり、あるスタイルと別のスタイルでユーティリティの意味が異なるかどうか疑問に思ったりする必要はありません。
そこで代わりに、Rhea という新しいスタイルを用意しました。これにより、基礎となるユーティリティの規模を予測可能に保ちながら、コンポーネントのサイズ、ギャップ、密度を直接調整できます。
現在、shadcn/create で Radix UI と Base UI の両方で利用可能です。
Rhea を試してみる
On This Page
なぜ新しいスタイルなのか?