Skip to content

Component Gallery

The Component Gallery renders each built-in placement slot directly in the browser — no Sandpack or iframe needed. Switch between story variants and theme presets to see how each component responds.

| Component | Type | Description | |-----------|------|-------------| | ButtonSlot | button | Standalone CTA button for nav bars and inline prompts | | BannerSlot | banner | Full-width banner for announcements and usage warnings | | ModalSlot | modal | Overlay modal for feature gates and trial expirations | | ToastSlot | toast | Ephemeral toast notification for usage alerts | | QuotaMeterSlot | in_page | Usage meter with progress bar, counter, and gauge styles | | InlineEmbedSlot | in_page | Inline card for feature gates and upgrade prompts |

Each page includes:

  • Variant selector — switch between story variants (e.g. Primary, Secondary, Accent)
  • Theme selector — Default, Dark, and Warm Brand presets
  • Live rendering — components render with the SDK’s real theme system