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 componentsButtonSeven variants, four sizes.
7 variantsLabelForm label, wraps Radix.
1 variantBadgeMetadata, status, inline labels.
7 variantsBadgeGroupAddon + message. Auto-flip colour pairing.
7 variantsCardContainer with header, content, footer.
1 compositionNavLinkNav item that flips with .dark scope.
3 sizesFeaturedIconDecorative container for Phosphor icons.
3 × 5 × 4BannerAnnouncement strip. Two tones, two sizes.
compoundAvatarImage + initials fallback.
6 sizesCheckboxCheck / indeterminate / unchecked.
3 sizesRadioArrow-key navigable group.
3 sizesToggleOn/off switch.
3 sizesSliderSingle + range, keyboard-driven.
1 variantTagFilter pill with active + close.
3 sizesProgressBarLinear, tone-aware.
3 sizesProgressCircleRadial, optional label.
4 sizesSpinnerAnimated loader.
5 sizesSkeletonPulse placeholder.
1 componentSeparatorHorizontal + vertical rules.
2 orientationsStatusIconPresence dots.
5 tonesTooltipHover/focus hint on Radix.
4 sidesHelpIconInfo button + tooltip pair.
1 variantDialogModal built on Radix.
1 variantForm composites
Tier 2InputFieldLabelled 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 3AccordionSingle- 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 4Marketing sections
Tier 5SectionShellShared 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 goalQuantityStepperNumeric 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.