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.
Tier 1
Primitives
The single-purpose building blocks — buttons, inputs, badges, avatars. Everything else is composed from these.
ButtonSeven 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 variantTier 2
Form composites
Labelled, accessible field groups for the parts of forms you build over and over.
InputFieldLabelled input with hint, error, icons, addons.
compositeTextareaFieldLabelled textarea with hint + error.
compositeCheckboxGroupControlled list with per-option hint + error.
compositeRadioGroupFieldLabelled radio group for shipping / payment pickers.
compositeSelectRadix Select with groups + separators.
compositeMultiSelectPopover of checkable options with chips in the trigger.
compositeToggleGroupJoined toggle buttons — single or multiple select.
compositeVerificationCodeInputOTP / 2FA input with auto-advance + paste.
compositeColorPickerSwatch palette + optional hex input.
compositeFileUploadDrag-and-drop with file list, accept, maxSize.
compositeTier 3
Compositions
Multi-part molecules — accordions, dropdowns, breadcrumbs, headers, and the small affordances pages need.
AccordionSingle- or multiple-open disclosure.
compositionAlertInline alert with 5 tones.
5 tonesAlertDialogForced Action/Cancel for destructive flows.
compositionAvatarGroupOverlapping avatars with +N truncation.
compositionAvatarLabelGroupAvatar + name + subtitle row.
compositionBreadcrumbsList + Item + Separator + Page compound.
compositionButtonGroupJoined-border row/column of Buttons.
compositionCardHeadingIcon + text + actions standalone card header.
compositionCodeSnippetCopyable code block, inline or block.
compositionDropdownMenuItems, checkbox, radio, sub-menus, shortcuts.
compositionEmptyStateIcon / Title / Description / Actions.
compositionFiltersBarApplied-filter chip row with clear-all.
compositionFiltersDropdownPopover facet with active-count badge.
compositionInlineCTACompact sidebar upsell / CTA card.
compositionMetricItemKPI: label + big number + delta badge.
compositionPageHeaderTitle / description / actions at top of page.
compositionPaginationNumberedPagination with ellipsis collapse.
compositionPaginationDotsDot indicator for carousels.
compositionPopoverRadix popover primitive.
compositionProgressStepsCheckout-style horizontal/vertical stepper.
compositionSectionHeaderEyebrow / title / description / actions + Footer.
compositionSocialButtonOAuth: google / apple / facebook / github / x.
compositionTabsUnderline / pill / segmented lists.
compositionToastPortal-based toasts via sonner.
compositionTier 4
Compounds
App-shell pieces and overlays — sheets, command palettes, tables, calendars, navigation chrome.
SheetSide-anchored slide-out panel.
compoundCommandcmdk palette with ⌘K dialog.
compoundTableSemantic HTML table parts.
compoundModalDialog with icon + 3 action layouts.
compoundCalendarreact-day-picker v9, single / range.
compoundSidebarNavApp-shell left sidebar compound.
compoundHeaderNavMarketing top-bar with brand + links.
compoundTier 5
Marketing sections
Hero, features, pricing, testimonials, FAQ, footer — the page-level building blocks for landing pages.
SectionShellShared container for every section.
sectionHeroSectionCentered or split landing hero.
sectionFeatureGrid2/3/4 column FeatureCard grid.
sectionCtaSectionMid-page CTA, boxed or flat.
sectionTestimonialSectionFeatured quote or card grid.
sectionPricingTierPricing plan card, highlighted variant.
sectionFaqSectionSplit or stacked FAQ layout.
sectionNewsletterCtaInline email-capture shell.
sectionFooterNavMulti-column site footer.
sectionTier 6 · end goal
Commerce blocks
The storefront pieces every shop needs — product cards, line items, summaries, pickers, the whole flow.
ProductCardImage, price, variant swatches, add-to-cart.
blockQuantityStepperNumeric stepper for cart / PDP.
blockPriceDisplayPrice + compareAt + discount pill.
blockStockIndicatorin-stock / low / out / pre-order.
blockRatingStars0-5 with partial fills + count.
blockVariantSelectorSwatches or chips PDP picker.
blockSizeSelectorSize chips + inline Size guide.
blockLineItemCart / mini-cart / order row.
blockOrderSummaryCart totals: rows + Total.
blockProductGalleryPDP main + thumb strip.
blockReviewItemReview header + rating + body.
blockListingToolbar + GridCount + actions + ProductCard grid.
blockFilterSidebarLeft-rail facet panel shell.
blockAnnouncementBarFree-shipping bar above header.
blockWishlistButtonHeart toggle, icon or labelled.
block