UI
Components

Primitives and commerce blocks, with the reasoning written in.

Each component ships with its source, its accessibility notes, and an argument for why it is built this way. Install one at a time.

Primitives

23 components
ButtonSeven variants, four sizes.
7 variants
LabelForm label, wraps Radix.
1 variant
BadgeMetadata, status, inline labels.
7 variants
BadgeGroupAddon + message. Auto-flip colour pairing.
7 variants
CardContainer with header, content, footer.
1 composition
NavLinkNav item that flips with .dark scope.
3 sizes
FeaturedIconDecorative container for Phosphor icons.
3 × 5 × 4
BannerAnnouncement strip. Two tones, two sizes.
compound
AvatarImage + initials fallback.
6 sizes
CheckboxCheck / indeterminate / unchecked.
3 sizes
RadioArrow-key navigable group.
3 sizes
ToggleOn/off switch.
3 sizes
SliderSingle + range, keyboard-driven.
1 variant
TagFilter pill with active + close.
3 sizes
ProgressBarLinear, tone-aware.
3 sizes
ProgressCircleRadial, optional label.
4 sizes
SpinnerAnimated loader.
5 sizes
SkeletonPulse placeholder.
1 component
SeparatorHorizontal + vertical rules.
2 orientations
StatusIconPresence dots.
5 tones
TooltipHover/focus hint on Radix.
4 sides
HelpIconInfo button + tooltip pair.
1 variant
DialogModal built on Radix.
1 variant

Form composites

Tier 2
InputFieldLabelled input with hint, error, icons, addons.
TextareaFieldLabelled textarea with hint + error.
CheckboxGroupControlled list with per-option hint + error.
RadioGroupFieldLabelled radio group for shipping / payment pickers.
SelectRadix Select with groups + separators.
MultiSelectPopover of checkable options with chips in the trigger.
ToggleGroupJoined toggle buttons — single or multiple select.
VerificationCodeInputOTP / 2FA input with auto-advance + paste.
ColorPickerSwatch palette + optional hex input.
FileUploadDrag-and-drop with file list, accept, maxSize.

Compositions

Tier 3
AccordionSingle- or multiple-open disclosure.
AlertInline alert with 5 tones.
AlertDialogForced Action/Cancel for destructive flows.
AvatarGroupOverlapping avatars with +N truncation.
AvatarLabelGroupAvatar + name + subtitle row.
BreadcrumbsList + Item + Separator + Page compound.
ButtonGroupJoined-border row/column of Buttons.
CardHeadingIcon + text + actions standalone card header.
CodeSnippetCopyable code block, inline or block.
DropdownMenuItems, checkbox, radio, sub-menus, shortcuts.
EmptyStateIcon / Title / Description / Actions.
FiltersBarApplied-filter chip row with clear-all.
FiltersDropdownPopover facet with active-count badge.
InlineCTACompact sidebar upsell / CTA card.
MetricItemKPI: label + big number + delta badge.
PageHeaderTitle / description / actions at top of page.
PaginationNumberedPagination with ellipsis collapse.
PaginationDotsDot indicator for carousels.
PopoverRadix popover primitive.
ProgressStepsCheckout-style horizontal/vertical stepper.
SectionHeaderEyebrow / title / description / actions + Footer.
SocialButtonOAuth: google / apple / facebook / github / x.
TabsUnderline / pill / segmented lists.
ToastPortal-based toasts via sonner.

Compounds

Tier 4
SheetSide-anchored slide-out panel.
Commandcmdk palette with ⌘K dialog.
TableSemantic HTML table parts.
ModalDialog with icon + 3 action layouts.
Calendarreact-day-picker v9, single / range.
SidebarNavApp-shell left sidebar compound.
HeaderNavMarketing top-bar with brand + links.

Marketing sections

Tier 5
SectionShellShared container for every section.
HeroSectionCentered or split landing hero.
FeatureGrid2/3/4 column FeatureCard grid.
CtaSectionMid-page CTA, boxed or flat.
TestimonialSectionFeatured quote or card grid.
PricingTierPricing plan card, highlighted variant.
FaqSectionSplit or stacked FAQ layout.
NewsletterCtaInline email-capture shell.
FooterNavMulti-column site footer.

Commerce blocks

Tier 6 · end goal
ProductCardImage, price, variant swatches, add-to-cart.
block
QuantityStepperNumeric stepper for cart / PDP.
PriceDisplayPrice + compareAt + discount pill.
StockIndicatorin-stock / low / out / pre-order.
RatingStars0-5 with partial fills + count.
VariantSelectorSwatches or chips PDP picker.
SizeSelectorSize chips + inline Size guide.
LineItemCart / mini-cart / order row.
OrderSummaryCart totals: rows + Total.
ProductGalleryPDP main + thumb strip.
ReviewItemReview header + rating + body.
ListingToolbar + GridCount + actions + ProductCard grid.
FilterSidebarLeft-rail facet panel shell.
AnnouncementBarFree-shipping bar above header.
WishlistButtonHeart toggle, icon or labelled.