Plinth

Components

The full Plinth inventory and where each component stands.

Components ship one at a time. Each goes through the same gate before the next one starts: built on the Base UI primitive, styled with semantic tokens only, verified in the browser (every state, keyboard navigation, light and dark), then documented with all variants rendered live.

Status meanings: Live has a docs page and registry URL. Building is in progress right now. Planned has a confirmed slot in the current phase.

Phase 1 · Core primitives

ComponentStatus
ButtonLive (includes icon-button sizes)
Button GroupLive
BadgeLive
TagLive
AvatarLive (with AvatarGroup)
KbdLive
SeparatorLive
LabelLive
FieldLive
InputLive
TextareaLive
CheckboxLive
Radio GroupLive
SwitchLive
SliderLive
ProgressLive (bar + circle)
SkeletonLive
SpinnerLive
SelectLive (single + multiple)
TooltipLive
PopoverLive
Dropdown MenuLive
Context MenuLive
DialogLive
Alert DialogLive
SheetLive (4 sides)
TabsLive
AccordionLive
CollapsibleLive
CardLive
AlertLive (5 variants)
ToastLive (incl. promise toasts)
BannerLive

Phase 2 · Application UI

ComponentStatus
ComboboxLive (filtering)
Command MenuLive
CalendarLive (single + range)
Date PickerLive
File UploaderLive (drag & drop)
BreadcrumbLive
PaginationLive
TableLive
Data TableLive (sort/filter/paginate)
Empty StateLive
StepperLive (2 orientations)
Sidebar NavLive
Header NavLive
Tree ViewLive (keyboard nav)
Stat CardLive
NotificationLive
Toggle, Toggle Group, Scroll Area, CarouselSession 4
Color Picker, Verification Code InputSession 4

Phase 3 · Rich & data

Charts (line, bar, area, donut), Code Block, Rich Text Editor shell, Chat primitives, QR Code, Credit Card Input, Video Player shell.

Phase 4 · Blocks

Auth pages, Settings pages, Dashboard examples, Empty and 404 pages, Marketing sections (hero, features, pricing, testimonials, FAQ, CTA, footer).

On this page