Components

The return affordance. Icon-only below md, labelled above it.

The primary action control. Seven variants and four sizes, including the convex white fill that carries BTS's primary affordance.

The rounded filter chip used above lists. Built on the .filter-pill custom class.

A two-state button. Pressed state is visual only — it does not submit.

A set of toggles behaving as one control, single- or multiple-select.

Collapsible sections, single or multiple open. Carries a BTS-only hideChevron prop.

Constrains content to a fixed ratio. A pure re-export.

The standard surface. Header, title, description, content and footer.

Unstyled show/hide. Brings no chrome of its own.

Draggable split panes, horizontal or vertical, with an optional grip handle.

A styled scroll container with the BTS thin scrollbar.

A one-pixel rule, horizontal or vertical, decorative or semantic.

The application shell navigation — 23 exports covering the rail, the collapsed icon state and the mobile drawer.

Date selection — single, range or multiple.

Binary choice, with a BTS-added indeterminate state.

The command palette — filtered list, groups and a shortcut column.

A select whose options carry an icon, a label and a description line.

The single-line text field. 48px tall on mobile, 40px on desktop.

Segmented one-time-code entry with a blinking caret.

The field label, with peer-disabled handling.

International phone entry with a country selector. Exports PHONE_COUNTRIES alongside it.

One choice from a set.

The dropdown picker. BTS removed the check indicator — selection reads via focus.

A value along a range, single thumb or two.

An immediate on/off. Track and thumb both resize below md.

The multi-line field.

An inline message with optional icon, title and description.

A small status or count marker. The default variant uses the gradient .badge-primary fill.

Determinate completion along a bar.

The loading placeholder — block, line, circle and stacked forms.

The sonner toast host, exported as SonnerToaster to avoid colliding with the Radix one.

A transient message anchored top on mobile, bottom-right from sm up.

The Radix toast host. Renders whatever toasts it is given.

A label on hover or focus. BTS defaults to an instant open.

Upload state as a persistent toast — progress, success and error.

A person or space, as an image with initial and icon fallbacks.

A swipeable track, horizontal or vertical, with arrow controls.

The Recharts wrapper — themed container, tooltip and legend.

The twenty BTS glyphs the product ships — navigation marks, state icons and the toggles that have no Lucide equivalent.

Full-screen image and video viewing, portalled above the app.

A frosted label that sits over media. The smallest component in the system.

The trail back up the hierarchy, with ellipsis collapsing.

A persistent horizontal menu bar with submenus and shortcuts.

Top-level navigation with hover panels. Stacks on mobile, absolute on desktop.

Page-by-page movement through a long list.

Sibling views within one screen.

A modal that demands a decision before it will close.

The right-click menu.

The modal surface. Supports stacking and a borderless variant.

The mobile bottom sheet, with drag-to-dismiss and background scaling.

The action menu. BTS adds first-class icon and shortcut props.

Rich preview content on hover.

The filter drawer shown below md. Renders nothing at all on desktop, where filters live inline.

A small floating panel anchored to a trigger.

A panel that slides in from any edge.

The dense record view — header, body, footer, caption and selection.

A card title with an explanatory tooltip beside it.

The stat-row variant of InfoTitle, sized for the bare stat card.

A single metric with its label and change. Two variants: the bordered card and a bare form for stat rows.

The padded content column every creator screen renders into.

A collapsible group of rail items, with its own disclosure chevron.

A single rail item — icon, label, active state. Built on the .nav-item custom class.

Two-calendar range picker for the Custom preset.

The preset list and calendar behind the reporting date control. Exports its presets, labels and resolver.

The compact date-range trigger used below md.

The payment-method mark. Exports PAYMENT_TYPES and a resolver from card id to type.

RefundModal — exported from the library at `src/components/transactions/RefundModal.tsx`. Awaiting a written description.

TransactionDetailHeader — exported from the library at `src/components/transactions/TransactionDetailHeader.tsx`. Awaiting a written description.

TransactionItemsCard — exported from the library at `src/components/transactions/TransactionItemsCard.tsx`. Awaiting a written description.

TransactionPaymentSummary — exported from the library at `src/components/transactions/TransactionPaymentSummary.tsx`. Awaiting a written description.

TransactionInfoCard — exported from the library at `src/components/transactions/TransactionSidebarCards.tsx`. Awaiting a written description.

Succeeded, refunded, partially refunded or disputed, with an explanatory tooltip.

TransactionTimeline — exported from the library at `src/components/transactions/TransactionTimeline.tsx`. Awaiting a written description.

Filters a product list by the layer it belongs to.

Recent transactions for one product.

Per-product performance figures, with defaults supplied for the prototype.

The metadata rail on a product detail screen — price, dates, access.

Title, share URL and actions above the product editor.

The compact product tile used in pickers and previews.

Filters by product kind. Exports its option set.

The product management table — desktop grid and a stacked mobile list from the same rows.

The six-card product type chooser, with search and a suggestion when nothing matches.

Lesson playback with the module outline beside it.

The post-registration event screen — countdown, attendees and calendar links.

The product description, with a heading that changes by product kind. Returns null when empty.

The storefront tile. Five product types by three pricing models, with an optional layer action menu.

The rich-text renderer behind the about section — bold, headings, lists.

The product screen header, with an optional completion ring.

Price, host, dates and the call to action on a product page.

Cover imagery with thumbnails, price and type pills over the media.

The row form of ProductCard, for the store's list view. Exports the media type labels.

Title and controls above a product grid.

The storefront header, with grid and list view toggles and an overflow menu.

Picks products to attach to something else, filtered by title.

What a member sees once a product is unlocked, by file type.

The rich-text description editor and its text styles.

Expiry and the less common settings.

Title and summary, with rotating placeholder copy.

The course variant of the editor shell, with the module outline in place of sections.

Module and lesson management for a course.

The read-only outline shown to a prospective buyer.

Drip, access and completion rules for a course.

Date, time, repeat and location for an event product.

Cover and gallery upload. Exports the product types that can carry unlockable media.

Pricing model and recurring interval.

Detail fields whose labels change by product kind.

The editor shell — sidebar, section column and live preview.

The live storefront preview beside the editor. Exports its price and CTA formatters.

Section navigation for the editor. Exports the empty form state it starts from.

Access and expiry for a standard product.

Upload and crop for the promotional still.

How a service is delivered — sessions, turnaround, submission and deliverable method.

Booking and scheduling rules for a service.

Video by upload or by URL, with a thumbnail resolver.

Who can see the product, with a description per option.

AccessTierCard — exported from the library at `src/components/settings/AccessTierCard.tsx`. Awaiting a written description.

AnalyticsAccountBanner — exported from the library at `src/components/settings/analytics/AnalyticsAccountBanner.tsx`. Awaiting a written description.

AnalyticsPaneHeader — exported from the library at `src/components/settings/analytics/AnalyticsPaneHeader.tsx`. Awaiting a written description.

AnalyticsPlatformSettings — exported from the library at `src/components/settings/analytics/AnalyticsPlatformSettings.tsx`. Awaiting a written description.

ConnectModal — exported from the library at `src/components/settings/analytics/ConnectModal.tsx`. Awaiting a written description.

ConnectWebsiteModal — exported from the library at `src/components/settings/ConnectWebsiteModal.tsx`. Awaiting a written description.

CreateDiscountModal — exported from the library at `src/components/settings/CreateDiscountModal.tsx`. Awaiting a written description.

The destructive action panel, with an optional type-to-confirm gate before it will fire.

A text field with a calendar popover, tolerant of loose typing.

DiscountSummary — exported from the library at `src/components/settings/DiscountEditor.tsx`. Awaiting a written description.

ApplyItemIcon — exported from the library at `src/components/settings/DiscountProductPicker.tsx`. Awaiting a written description.

DiscountTypeModal — exported from the library at `src/components/settings/DiscountTypeModal.tsx`. Awaiting a written description.

GA4Settings — exported from the library at `src/components/settings/analytics/GA4Settings.tsx`. Awaiting a written description.

GHLAccountCard — exported from the library at `src/components/settings/ghl/GHLAccountCard.tsx`. Awaiting a written description.

GHLActiveKeys — exported from the library at `src/components/settings/ghl/GHLActiveKeys.tsx`. Awaiting a written description.

GHLConnectModal — exported from the library at `src/components/settings/ghl/GHLConnectModal.tsx`. Awaiting a written description.

GHLDeleteKeyModal — exported from the library at `src/components/settings/ghl/GHLDeleteKeyModal.tsx`. Awaiting a written description.

Edit a name in place: display until invited to edit, then a field, with optional delete.

Who can see a layer — public, link, members, a named tier, or invite only.

The twelve role glyphs, with a fallback for an unknown id. Exports the id list and map.

SettingsAccess — exported from the library at `src/components/settings/SettingsAccess.tsx`. Awaiting a written description.

SettingsAdmins — exported from the library at `src/components/settings/SettingsAdmins.tsx`. Awaiting a written description.

SettingsAnalytics — exported from the library at `src/components/settings/SettingsAnalytics.tsx`. Awaiting a written description.

SettingsApps — exported from the library at `src/components/settings/SettingsApps.tsx`. Awaiting a written description.

SettingsBilling — exported from the library at `src/components/settings/SettingsBilling.tsx`. Awaiting a written description.

SettingsDetails — exported from the library at `src/components/settings/SettingsDetails.tsx`. Awaiting a written description.

SettingsDiscountManage — exported from the library at `src/components/settings/SettingsDiscountManage.tsx`. Awaiting a written description.

SettingsDiscounts — exported from the library at `src/components/settings/SettingsDiscounts.tsx`. Awaiting a written description.

SettingsGHLManage — exported from the library at `src/components/settings/SettingsGHLManage.tsx`. Awaiting a written description.

SettingsManage — exported from the library at `src/components/settings/SettingsManage.tsx`. Awaiting a written description.

SettingsNotifications — exported from the library at `src/components/settings/SettingsNotifications.tsx`. Awaiting a written description.

SettingsPaymentMethods — exported from the library at `src/components/settings/SettingsPaymentMethods.tsx`. Awaiting a written description.

SettingsPayouts — exported from the library at `src/components/settings/SettingsPayouts.tsx`. Awaiting a written description.

SettingsPayoutsBankManage — exported from the library at `src/components/settings/SettingsPayoutsBankManage.tsx`. Awaiting a written description.

SettingsPlan — exported from the library at `src/components/settings/SettingsPlan.tsx`. Awaiting a written description.

SettingsRoleManage — exported from the library at `src/components/settings/SettingsRoleManage.tsx`. Awaiting a written description.

SettingsRoles — exported from the library at `src/components/settings/SettingsRoles.tsx`. Awaiting a written description.

A stack of label, description and control rows — the body of a settings section, at two densities.

The title, description and actions above a block of settings. The unit every settings screen is stacked from.

SettingsSendingDomain — exported from the library at `src/components/settings/SettingsSendingDomain.tsx`. Awaiting a written description.

SettingsSidebar — exported from the library at `src/components/settings/SettingsSidebar.tsx`. Awaiting a written description.

SettingsWebsiteManage — exported from the library at `src/components/settings/SettingsWebsiteManage.tsx`. Awaiting a written description.

Page controls beneath a table. Hides itself entirely when there is nothing to page through.

Half-hour time selection, auto-scrolled to the current value.

The share sheet — copyable link, preview card and platform targets.

The seven platform marks the share sheet uses, plus the platform list itself.

Wraps a preview in a desktop or mobile device frame.

A membership tier, shown as a pill.

Selects one or more tiers, with a formatter for the collapsed label.