UI
Backlog

From primitives to e-commerce blocks.

Analysed the Untitled UI Pro Figma source, filtered out the page-level examples (marketing pages, dashboards, utility), and mapped every component set onto a dependency graph. The order below follows that graph: leaf primitives first, compounds in the middle, e-commerce blocks last. Each tier can be built in parallel once the tier above is done.

done fully shipped partial exists but needs the full Figma spec todo not started

Tier 0 · Foundations

8 / 8

Tokens, type, icons, shadows. These are inherited by every component below. Shipped.

  1. 01
    Color tokens — monochrome brand + Tailwind lime
    Done
  2. 02
    Typography — Display + Text scale with tracking on display
    Done
  3. 03
    Icons — Phosphor Icons via @phosphor-icons/react/ssr
    Done
  4. 04
    Spacing & radii
    Done
  5. 05
    Shadows & blurs — UntitledUI multi-layer recipes
    Done
  6. 06
    Focus ring — .focus-ring-lime / .focus-ring-error utilities
    Done
  7. 07
    Logos — BrandWordmark + square favicon
    Done
  8. 08
    FeaturedIconusestokens
    Done

Tier 1 · Atomic primitives

19 / 20

Leaf components with no inter-component dependencies. Safe to build in parallel.

  1. 01
    Button
    Done
  2. 02
    Input (basic)Ship v2 with states, icons, addons, sizes in Tier 2.
    Partial
  3. 03
    Label
    Done
  4. 04
    Badge + BadgeDot
    Done
  5. 05
    BadgeGroup + BadgeGroupAddon
    Done
  6. 06
    NavLink
    Done
  7. 07
    TagFilter pill + multi-select chip. Active state + optional close X.
    Done
  8. 08
    AvatarRadix primitive. 6 sizes, circle + square, with image + initials fallback.
    Done
  9. 09
    Status icon5 tones (online/offline/busy/away/accent) × 4 sizes. Paired with Avatar for presence.
    Done
  10. 10
    Help iconInfo button + Tooltip. aria-label doubles as tooltip content.
    Done
  11. 11
    Separator / Content dividerRadix separator. Horizontal + vertical.
    Done
  12. 12
    Loading indicator / SpinnerCircleNotch from Phosphor. 5 sizes, 4 tones.
    Done
  13. 13
    Progress barRadix progress. 3 sizes, 5 tones.
    Done
  14. 14
    Progress circleSVG-based. 4 sizes, 5 tones, optional centred label.
    Done
  15. 15
    Skeleton
    Done
  16. 16
    CheckboxRadix. Check / indeterminate / unchecked. 3 sizes.
    Done
  17. 17
    RadioRadix RadioGroup + Radio. Keyboard arrows. 3 sizes.
    Done
  18. 18
    Toggle (Switch)Radix Switch. 3 sizes.
    Done
  19. 19
    SliderSingle + range auto-detect from value length. Radix.
    Done
  20. 20
    TooltipRadix. Shorthand Tooltip + primitive parts. TooltipProvider wired into docs root.
    Done

Tier 2 · Form composites

10 / 13

Build on Tier 1. Form fields with labels, hints, errors, and bespoke inputs.

  1. 01
    InputField (labelled)Label, hint, error, required asterisk, leading/trailing icons, leading/trailing addons, help tooltip.usesInput · Label · HelpIcon · Tooltip
    Done
  2. 02
    Textarea + TextareaFieldTextarea primitive + labelled TextareaField wrapper.usesLabel · HelpIcon
    Done
  3. 03
    VerificationCodeInputOTP / 2FA — N discrete cells, auto-advance, backspace-to-previous, paste support.
    Done
  4. 04
    CheckboxGroupControlled list with per-option hint + error. Vertical / horizontal orientation.usesCheckbox · Label
    Done
  5. 05
    RadioGroupFieldLabelled RadioGroup with per-option hint + error. Ideal for shipping/payment pickers.usesRadio · Label
    Done
  6. 06
    ToggleGroupRadix toggle-group: single or multiple selection. Joined row with outline or ghost variant.
    Done
  7. 07
    SelectRadix Select with groups + separators. Keyboard-navigable, portal-rendered.usesLabel
    Done
  8. 08
    MultiSelectPopover of checkable options with selected chips in the trigger. maxChips + overflow count.usesPopover
    Done
  9. 09
    Combobox / Command inputusesInput
    Todo
  10. 10
    Date picker dropdownusesCalendar
    Todo
  11. 11
    Date picker modalusesCalendar · Dialog
    Todo
  12. 12
    ColorPickerCompact swatch palette + optional hex input. Controlled or uncontrolled; custom swatches via prop.
    Done
  13. 13
    FileUploadDrag-and-drop with file list. accept / multiple / maxSize. Controlled or uncontrolled.usesFeaturedIcon
    Done

Tier 3 · Molecules

26 / 26

Composed from primitives. Cards, rows, headers, nav items — the connective tissue.

  1. 01
    Card
    Done
  2. 02
    BannerusesFeaturedIcon · Button
    Done
  3. 03
    PopoverRadix popover primitive. Backbone for dropdowns, date pickers, filter pickers.
    Done
  4. 04
    DropdownMenuRadix. Includes Item, CheckboxItem, RadioItem, Label, Separator, Shortcut, Sub-menus.usesPopover
    Done
  5. 05
    AlertDialogRadix alert-dialog. Forces explicit Action/Cancel for destructive flows.usesDialog · Button
    Done
  6. 06
    AlertInline alert with 5 tones (neutral/info/success/warning/destructive), optional onDismiss.usesFeaturedIcon
    Done
  7. 07
    TabsRadix tabs. Three list variants: underline / pill / segmented.usesButton
    Done
  8. 08
    AccordionRadix accordion. Single-open (FAQ) or multiple-open (filter panels).
    Done
  9. 09
    BreadcrumbsCompound — List, Item, Link, Page, Separator. Caret separator by default, overridable.usesNavLink
    Done
  10. 10
    PaginationPrimitive parts + NumberedPagination convenience wrapper with ellipsis collapse.usesButton
    Done
  11. 11
    Empty stateCompound — Icon, Title, Description, Actions.usesFeaturedIcon · Button
    Done
  12. 12
    AvatarGroupOverlapping avatars with ring separator. max / total props for truncation badge.usesAvatar
    Done
  13. 13
    AvatarLabelGroupAvatar + name + subtitle. For nav account buttons, table rows, testimonials.usesAvatar
    Done
  14. 14
    ButtonGroupJoined-border row/column of Buttons. Strips radius/borders on middle siblings.usesButton
    Done
  15. 15
    SocialButton / SocialButtonGroupOAuth buttons with provider-picked logo (google/apple/facebook/github/x). Group stacks full-width.usesButton
    Done
  16. 16
    PaginationDotsCarousel indicator. Active dot elongates. Controlled via value + onChange.
    Done
  17. 17
    ProgressStepsStepper — minimal or with-text, horizontal or vertical.
    Done
  18. 18
    Toast / Notificationsonner wrapper. Mount <Toaster /> once at root, then call toast.success / .info / .warning / .error.usesFeaturedIcon · Button
    Done
  19. 19
    InlineCTACompact CTA card for sidebars / PDP columns / dashboards.usesFeaturedIcon · Button
    Done
  20. 20
    MetricItemKPI card: label + big number + delta badge with arrow.usesBadge
    Done
  21. 21
    CardHeading (standalone)Icon + text + actions card header. Exports as CardHeading to not collide with Card's internal CardHeader.
    Done
  22. 22
    SectionHeader / SectionLabel / SectionFooterEyebrow / title / description / actions compound for in-page section intros.
    Done
  23. 23
    PageHeaderCompound page top: title / description / actions. Pair with Breadcrumbs.usesBreadcrumbs · Button
    Done
  24. 24
    CodeSnippetCopyable code block. Inline (pill) or block (card) variants. Clipboard API; no syntax highlighting (bring your own).
    Done
  25. 25
    FiltersBarApplied-filter chip row with clear-all action. Layout container; caller renders chips.usesTag · Button
    Done
  26. 26
    FiltersDropdownFacet filter popover. Trigger shows active-count badge; body accepts Checkbox/Radio/Slider.usesPopover · Button · Badge
    Done

Tier 4 · Compounds

11 / 19

Feature-scale components. Need Tier 3 to be in place.

  1. 01
    Dialog (≈ Modal)
    Done
  2. 02
    Modal (UntitledUI spec)Opinionated wrapper: icon + title + description + actions row (horizontal / vertical / full-width layouts).usesDialog
    Done
  3. 03
    AlertDialog (destructive confirm)Shipped in Tier 3A.usesDialog · Button
    Done
  4. 04
    Sheet (slide-out)Radix Dialog with top/right/bottom/left side variants. For cart drawer, mobile nav, filter panels.usesDialog
    Done
  5. 05
    PopoverShipped in Tier 3A.
    Done
  6. 06
    Dropdown menuShipped in Tier 3A.usesPopover
    Done
  7. 07
    Context menuDeferred — niche, not ecommerce-critical.usesDropdown menu
    Todo
  8. 08
    Command menucmdk-based. Command + CommandDialog (global ⌘K) + Input / List / Group / Item / Empty / Shortcut / Separator.usesDialog
    Done
  9. 09
    TableSemantic HTML parts. Table / Header / Body / Footer / Row / Head / Cell / Caption. Pair with @tanstack/react-table for data grids.
    Done
  10. 10
    Tree viewDeferred — not ecommerce-critical.
    Todo
  11. 11
    Calendarreact-day-picker v9 styled to BTNG tokens. Single / range / multiple modes.
    Done
  12. 12
    Charts (line, bar, pie, activity gauge)Deferred — big surface, closer to real demand.
    Todo
  13. 13
    Activity feedDeferred — not ecommerce-critical for MVP.usesAvatar · Badge
    Todo
  14. 14
    MessagingDeferred — not ecommerce-critical.usesAvatar · Status icon
    Todo
  15. 15
    Video player 16:9Deferred — PDP videos can use native <video> for now.usesButton · Slider
    Todo
  16. 16
    Text editorDeferred — rarely needed for ecommerce surfaces.usesTooltip · Button group
    Todo
  17. 17
    HeaderNav (marketing)Top-bar shell: Brand / Links / Actions. Sticky + backdrop blur. Pair with Sheet for mobile.
    Done
  18. 18
    Dropdown header navigationDeferred — compose from HeaderNav + DropdownMenu when needed.usesHeaderNav · Dropdown menu
    Todo
  19. 19
    SidebarNav (app)Compound: Header / Body / Footer + Group / GroupLabel / Item. Hidden below lg; pair with Sheet for mobile.
    Done

Tier 5 · Marketing sections

9 / 18

Section-scale blocks used on landing pages and the BTNG.UI docs itself. Not primitives — layouts that compose Tier 1-4.

  1. 01
    SectionShellShared container for every Tier 5 section — max-width, vertical rhythm, optional background tone.
    Done
  2. 02
    HeroSectionCentered or split layout. Slots: Eyebrow / Title / Description / Actions + split `media` prop.usesSectionShell
    Done
  3. 03
    Header section (non-hero)Deferred — compose from PageHeader + SectionShell directly.
    Todo
  4. 04
    CtaSectionMid/end-of-page CTA. Boxed (contained card) or flat. Slots: Title / Description / Actions.usesSectionShell
    Done
  5. 05
    FeatureGrid2/3/4 column feature grid with FeatureCard (icon + title + description).usesSectionShell
    Done
  6. 06
    Metrics sectionDeferred — MetricItem already exists; compose inside a SectionShell grid.usesMetricItem
    Todo
  7. 07
    Social proof sectionDeferred — AvatarGroup + logo strip inside SectionShell.usesAvatar
    Todo
  8. 08
    Press mentions sectionDeferred — logo-strip inside SectionShell.
    Todo
  9. 09
    TestimonialSectionFeatured (centered quote) or card-grid. Slots: quote / author / role / avatar.usesAvatar
    Done
  10. 10
    FaqSectionSplit (title left, accordion right) or stacked layout.usesAccordion
    Done
  11. 11
    NewsletterCtaInline email-capture section. Title + description + form slot + footnote.usesInput · Button
    Done
  12. 12
    PricingTierStandalone pricing plan card — compose multiple in a grid. Highlighted variant for recommended plan.
    Done
  13. 13
    Contact sections + Contact page headerDeferred — compose InputField + Textarea + PageHeader inside SectionShell.usesInputField · Textarea
    Todo
  14. 14
    Team sectionDeferred — Avatar grid inside SectionShell.usesAvatar
    Todo
  15. 15
    Blog section / Blog post card / Blog subscribe cardDeferred — compose Card + Avatar + Badge.
    Todo
  16. 16
    Blog post page header + Content section + Content itemDeferred — PageHeader + prose inside SectionShell.
    Todo
  17. 17
    Careers sectionDeferred — table of roles inside SectionShell.
    Todo
  18. 18
    FooterNavMulti-column site footer: Top (brand + link columns) + Bottom (copyright + socials).
    Done

Tier 6 · E-commerce blocks (end goal)

19 / 24

The reason we built BTNG.UI. Commerce-specific patterns composed from everything above.

  1. 01
    ProductPage (PDP)Full PDP — gallery + breadcrumbs + title + rating + price + variants + quantity + CTA + shipping promise + specs + reviews.usesProductGallery · VariantSelector · SizeSelector · QuantityStepper · PriceDisplay · ReviewItem
    Done
  2. 02
    ProductCard
    Done
  3. 03
    ProductCard variants (image-over, horizontal, compact)Deferred — base ProductCard is flexible enough; re-skin via className + asChild.usesProductCard
    Todo
  4. 04
    QuantityStepperNumeric stepper for cart line items and PDP add-to-cart. Clamps between min/max, controlled or uncontrolled, 3 sizes.
    Done
  5. 05
    PriceDisplayPrice + compareAt (strikethrough) + optional discount pill. 4 sizes.
    Done
  6. 06
    VariantSelectorPDP variant picker: swatches (color circles) or chips (labelled pills) mode. Controlled or uncontrolled. radiogroup semantics.
    Done
  7. 07
    SizeSelectorVariantSelector (chips) with inline 'Size guide' action.usesVariantSelector
    Done
  8. 08
    ProductGalleryPDP image gallery: main + thumb strip. Below (default) or side orientation. Configurable aspect ratio.
    Done
  9. 09
    Rating / Review summaryDeferred — compose RatingStars + ProgressBar rows inside a Card.usesRatingStars · ProgressBar
    Todo
  10. 10
    ReviewItemHeader (avatar + author + date + verified badge) + Rating slot + Title + Body.usesAvatar · RatingStars
    Done
  11. 11
    CartPageFull cart page: line items + order summary with promo + checkout CTA + empty state fallback.usesLineItem · OrderSummary · PageHeader
    Done
  12. 12
    LineItemCart / mini-cart / order-summary row: Image / Title / Meta / Actions / Price / Remove. Pair with QuantityStepper inside Actions.usesQuantityStepper
    Done
  13. 13
    OrderSummaryCart totals card: subtotal / shipping / tax / discount rows + prominent Total.
    Done
  14. 14
    CheckoutPage (incl. address + payment forms)Three-step checkout: Address → Shipping → Payment with sticky order summary. All forms inline.usesProgressSteps · InputField · Radio · OrderSummary
    Done
  15. 15
    FilterSidebarLeft-rail facet panel shell. Header (title + clear) + Accordion body of facets. Wrap in Sheet for mobile.usesAccordion · CheckboxGroup · Slider
    Done
  16. 16
    Sort selectReuses Select primitive directly — no new component needed.usesSelect
    Todo
  17. 17
    ListingToolbar + ListingGridTop bar (count + actions) + responsive 2-5 col grid for ProductCard.usesProductCard
    Done
  18. 18
    ListingPage (PLP)Full listing page: sidebar facets (desktop) or Sheet (mobile) + toolbar + product grid + pagination.usesListingGrid · Pagination · FilterSidebar · Sheet
    Done
  19. 19
    Shipping estimatorDeferred — compose InputField + Button inline.usesInputField · Button
    Todo
  20. 20
    StockIndicatorin-stock / low-stock / out-of-stock / pre-order with tone-coloured dot + label.
    Done
  21. 21
    WishlistButtonHeart toggle. Icon-only (floats on ProductCard) or labelled (PDP). Fills when active.
    Done
  22. 22
    Empty cart stateReuses EmptyState directly — no new block needed.usesEmptyState
    Done
  23. 23
    Order confirmation success screenDeferred — compose FeaturedIcon + heading + OrderSummary inside SectionShell.usesFeaturedIcon · OrderSummary
    Todo
  24. 24
    AnnouncementBarThin full-width strip above the header: free-shipping threshold, sales, global messages. Accent (lime) or inverse (dark) tones.
    Done

Notes on scope

  • Skipped per your direction: all page-level examples (marketing website pages, application examples, utility page, experiment). Those are blueprints, not primitives — they get rebuilt as real pages once Tier 5 is in place.
  • Underscore-prefixed Figma components (_Nav item base,_Tab button base, etc.) are treated as internal sub-parts. They inform the implementation but don't need their own public exports.
  • Every new component ships with a registry manifest, docs page with Configurator where it has > 2 axes, live Variant blocks, and a Reasoning section. That scaffolding is already in place.
  • Charts, Video player, and Text editor are big enough to defer until closer to real demand. Flagged in Tier 4 but not required for the Tier 6 e-commerce goal.