Introduction

Base UI powered components, distributed through the shadcn registry.

SevenUI is a registry of 54 components built on Base UI primitives. Components are installed as source code into your project through the shadcn CLI — no runtime package to depend on.

Why SevenUI

Base UI first — no Radix, anywhere. Every interactive primitive is Base UI; the only exceptions are four sanctioned, Radix-free specialized libraries (calendar, carousel, chart, resizable).
Drop-in shadcn compatibility — works with the shadcn CLI and your existing components.json setup.
Source distribution via the registry — components install as source files you own, not a package you depend on.

Component coverage

SevenUI ships with 53 components across five waves:

Foundation wave (15): button, badge, kbd, card, alert, separator, skeleton, spinner, aspect-ratio, textarea, table, breadcrumb, pagination, avatar, progress.
Form wave (14): input, label, field, form, checkbox, radio-group, switch, toggle, toggle-group, slider, number-field, input-otp, select, combobox.
Overlay wave (11): dialog, alert-dialog, sheet, drawer, popover, hover-card, tooltip, dropdown-menu, context-menu, menubar, toast.
Navigation & composite wave (9): tabs, accordion, collapsible, navigation-menu, scroll-area, toolbar, meter, command, sidebar.
Third-party wrapper wave (4): calendar, carousel, chart, resizable.

Navigation and composition are complete — tabs, menus, a shared-popup navigation menu, a command palette, and a full sidebar system — with zero Radix dependencies. No Radix, no cmdk, no vaul, no sonner: every component that can be built on Base UI alone uses Base UI and nothing else. The third-party wrapper wave adds exactly four specialized, Radix-free libraries — react-day-picker, embla-carousel, recharts, and react-resizable-panels — for the components that genuinely cannot be built on Base UI primitives, the same sanctioned choices shadcn makes. These four are the only non-Base-UI dependencies in the registry.

Form components use Base UI-native form handling. Libraries like react-hook-form plug into the Field component’s external-state props — see Field.

Ready to add your first component? Head over to Installation.