Files
WRNexusJS/.publish/ui/COMPONENTS.md
T

279 KiB

WRNexus UI component reference

This reference is generated from the 891 packaged .wrn component sources. Props marked required have no default; all others show their runtime default.

Actions

AcceptAllCookiesButton

Reusable accept all cookies button component.

  • Mount: data-component="AcceptAllCookiesButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ArticleNewsletterCTA

Reusable article newsletter c t a component.

  • Mount: data-component="ArticleNewsletterCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ArticleShareActions

Reusable article share actions component.

  • Mount: data-component="ArticleShareActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

BackButton

Reusable back button component.

  • Mount: data-component="BackButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Button

Reusable button component.

  • Mount: data-component="Button"
  • Props: label: string = "Button", type: string = "button", variant: string = "primary", size: string = "md", disabled: boolean = false, loading: boolean = false, icon: string = "", className: string = ""
  • Slots: None
  • Events: None

CenteredCTA

Reusable centered c t a component.

  • Mount: data-component="CenteredCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ClearFiltersButton

Reusable clear filters button component.

  • Mount: data-component="ClearFiltersButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CloseButton

Reusable close button component.

  • Mount: data-component="CloseButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CodeCopyButton

Reusable code copy button component.

  • Mount: data-component="CodeCopyButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ContactCTA

Reusable contact c t a component.

  • Mount: data-component="ContactCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ContactSalesButton

Reusable contact sales button component.

  • Mount: data-component="ContactSalesButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CopyButton

Reusable copy button component.

  • Mount: data-component="CopyButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CopyCodeButton

Reusable copy code button component.

  • Mount: data-component="CopyCodeButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DangerButton

Reusable danger button component.

  • Mount: data-component="DangerButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DeveloperCTA

Reusable developer c t a component.

  • Mount: data-component="DeveloperCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable do not sell link component.

  • Mount: data-component="DoNotSellLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DownloadAction

Reusable download action component.

  • Mount: data-component="DownloadAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DownloadButton

Reusable download button component.

  • Mount: data-component="DownloadButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DownloadPolicyButton

Reusable download policy button component.

  • Mount: data-component="DownloadPolicyButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

EnterpriseCTA

Reusable enterprise c t a component.

  • Mount: data-component="EnterpriseCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ErrorActions

Reusable error actions component.

  • Mount: data-component="ErrorActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable error support link component.

  • Mount: data-component="ErrorSupportLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable external link component.

  • Mount: data-component="ExternalLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FieldActions

Reusable field actions component.

  • Mount: data-component="FieldActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FinalCTA

Reusable final c t a component.

  • Mount: data-component="FinalCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FormActions

Reusable form actions component.

  • Mount: data-component="FormActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

GhostButton

Reusable ghost button component.

  • Mount: data-component="GhostButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

GradientCTA

Reusable gradient c t a component.

  • Mount: data-component="GradientCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

HeaderActions

Reusable header actions component.

  • Mount: data-component="HeaderActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

HeroActions

Reusable hero actions component.

  • Mount: data-component="HeroActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

HeroPrimaryAction

Reusable hero primary action component.

  • Mount: data-component="HeroPrimaryAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

HeroSecondaryAction

Reusable hero secondary action component.

  • Mount: data-component="HeroSecondaryAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

IconButton

Reusable icon button component.

  • Mount: data-component="IconButton"
  • Props: label: string = "Action", icon: string = "•", variant: string = "ghost", disabled: boolean = false
  • Slots: None
  • Events: None

LegalPrintButton

Reusable legal print button component.

  • Mount: data-component="LegalPrintButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

LinkButton

Reusable link button component.

  • Mount: data-component="LinkButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

LoadingButton

Reusable loading button component.

  • Mount: data-component="LoadingButton"
  • Props: label: string = "Continue", loadingLabel: string = "Loading…", loading: boolean = false, disabled: boolean = false, type: string = "button", variant: string = "primary", class: string = ""
  • Slots: None
  • Events: None

Reusable localized route link component.

  • Mount: data-component="LocalizedRouteLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

MobileMenuButton

Reusable mobile menu button component.

  • Mount: data-component="MobileMenuButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

NewsletterCTA

Reusable newsletter c t a component.

  • Mount: data-component="NewsletterCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

OpenAPICTA

Reusable open a p i c t a component.

  • Mount: data-component="OpenAPICTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PasskeyButton

Reusable passkey button component.

  • Mount: data-component="PasskeyButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PlanCTA

Reusable plan c t a component.

  • Mount: data-component="PlanCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PostmanCTA

Reusable postman c t a component.

  • Mount: data-component="PostmanCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PrimaryButton

Reusable primary button component.

  • Mount: data-component="PrimaryButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PrintAction

Reusable print action component.

  • Mount: data-component="PrintAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PrintPolicyButton

Reusable print policy button component.

  • Mount: data-component="PrintPolicyButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ProductCTA

Reusable product c t a component.

  • Mount: data-component="ProductCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

RejectOptionalCookiesButton

Reusable reject optional cookies button component.

  • Mount: data-component="RejectOptionalCookiesButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ReopenCookieSettingsButton

Reusable reopen cookie settings button component.

  • Mount: data-component="ReopenCookieSettingsButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ResponsibleDisclosureCTA

Reusable responsible disclosure c t a component.

  • Mount: data-component="ResponsibleDisclosureCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SaveCookiePreferencesButton

Reusable save cookie preferences button component.

  • Mount: data-component="SaveCookiePreferencesButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SearchButton

Reusable search button component.

  • Mount: data-component="SearchButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SecondaryButton

Reusable secondary button component.

  • Mount: data-component="SecondaryButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SectionActions

Reusable section actions component.

  • Mount: data-component="SectionActions"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ShareAction

Reusable share action component.

  • Mount: data-component="ShareAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ShareButton

Reusable share button component.

  • Mount: data-component="ShareButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable sign in link component.

  • Mount: data-component="SignInLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable skip link component.

  • Mount: data-component="SkipLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SplitButton

Reusable split button component.

  • Mount: data-component="SplitButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SplitCTA

Reusable split c t a component.

  • Mount: data-component="SplitCTA"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

StartFreeButton

Reusable start free button component.

  • Mount: data-component="StartFreeButton"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

TertiaryButton

Reusable tertiary button component.

  • Mount: data-component="TertiaryButton"
  • Props: label: string = "Action", type: string = "button", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Reusable text link component.

  • Mount: data-component="TextLink"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ToastAction

Reusable toast action component.

  • Mount: data-component="ToastAction"
  • Props: label: string = "Action", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Content

AccessibleAccordion

Reusable accessible accordion component.

  • Mount: data-component="AccessibleAccordion"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleCarousel

Reusable accessible carousel component.

  • Mount: data-component="AccessibleCarousel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleChartSummary

Reusable accessible chart summary component.

  • Mount: data-component="AccessibleChartSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleErrorSummary

Reusable accessible error summary component.

  • Mount: data-component="AccessibleErrorSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleIcon

Reusable accessible icon component.

  • Mount: data-component="AccessibleIcon"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleTabs

Reusable accessible tabs component.

  • Mount: data-component="AccessibleTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AccessibleTooltip

Reusable accessible tooltip component.

  • Mount: data-component="AccessibleTooltip"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Accordion

Reusable accordion component.

  • Mount: data-component="Accordion"
  • Props: title: string = "Question", open: boolean = false
  • Slots: default
  • Events: click

AddOnCard

Reusable add on card component.

  • Mount: data-component="AddOnCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AddressPreview

Reusable address preview component.

  • Mount: data-component="AddressPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AdvancedFilterBuilder

Reusable advanced filter builder component.

  • Mount: data-component="AdvancedFilterBuilder"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AnalyticsDashboardPreview

Reusable analytics dashboard preview component.

  • Mount: data-component="AnalyticsDashboardPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiEndpointCard

Reusable api endpoint card component.

  • Mount: data-component="ApiEndpointCard"
  • Props: method: string = "GET", path: string = "/api/example", description: string = ""
  • Slots: default
  • Events: None

ApiErrorExample

Reusable api error example component.

  • Mount: data-component="ApiErrorExample"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiKeyDisplay

Reusable api key display component.

  • Mount: data-component="ApiKeyDisplay"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiRequestExample

Reusable api request example component.

  • Mount: data-component="ApiRequestExample"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiResponseExample

Reusable api response example component.

  • Mount: data-component="ApiResponseExample"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiSchemaViewer

Reusable api schema viewer component.

  • Mount: data-component="ApiSchemaViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AssetCard

Reusable asset card component.

  • Mount: data-component="AssetCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

AttachmentUpload

Reusable attachment upload component.

  • Mount: data-component="AttachmentUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AudioUpload

Reusable audio upload component.

  • Mount: data-component="AudioUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AuditLogPreview

Reusable audit log preview component.

  • Mount: data-component="AuditLogPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AuthorAvatar

Reusable author avatar component.

  • Mount: data-component="AuthorAvatar"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AuthorCard

Reusable author card component.

  • Mount: data-component="AuthorCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AuthorizedApplicationCard

Reusable authorized application card component.

  • Mount: data-component="AuthorizedApplicationCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AutomationExampleCard

Reusable automation example card component.

  • Mount: data-component="AutomationExampleCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

AvailabilityCalendar

Reusable availability calendar component.

  • Mount: data-component="AvailabilityCalendar"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Avatar

Reusable avatar component.

  • Mount: data-component="Avatar"
  • Props: src: string = "", alt: string = "", initials: string = "WR", size: string = "md"
  • Slots: None
  • Events: None

AvatarUpload

Reusable avatar upload component.

  • Mount: data-component="AvatarUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BankTransferDetails

Reusable bank transfer details component.

  • Mount: data-component="BankTransferDetails"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BillingAddressForm

Reusable billing address form component.

  • Mount: data-component="BillingAddressForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BillingExample

Reusable billing example component.

  • Mount: data-component="BillingExample"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BlogCard

Reusable blog card component.

  • Mount: data-component="BlogCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BlogSearch

Reusable blog search component.

  • Mount: data-component="BlogSearch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

BodyText

Reusable body text component.

  • Mount: data-component="BodyText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

BudgetRangeSlider

Reusable budget range slider component.

  • Mount: data-component="BudgetRangeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Calendar

Reusable calendar component.

  • Mount: data-component="Calendar"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CampaignCard

Reusable campaign card component.

  • Mount: data-component="CampaignCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

CampaignPerformancePreview

Reusable campaign performance preview component.

  • Mount: data-component="CampaignPerformancePreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Card

Reusable card component.

  • Mount: data-component="Card"
  • Props: variant: string = "default", padding: string = "md", interactive: boolean = false, className: string = ""
  • Slots: default
  • Events: None

CardPaymentForm

Reusable card payment form component.

  • Mount: data-component="CardPaymentForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CareerApplicationForm

Reusable career application form component.

  • Mount: data-component="CareerApplicationForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Reusable carousel component.

  • Mount: data-component="Carousel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CaseStudyCard

Reusable case study card component.

  • Mount: data-component="CaseStudyCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CaseStudyPreview

Reusable case study preview component.

  • Mount: data-component="CaseStudyPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CertificateUpload

Reusable certificate upload component.

  • Mount: data-component="CertificateUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ChannelCard

Reusable channel card component.

  • Mount: data-component="ChannelCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ChannelIcon

Reusable channel icon component.

  • Mount: data-component="ChannelIcon"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ChartTooltip

Reusable chart tooltip component.

  • Mount: data-component="ChartTooltip"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Checklist

Reusable checklist component.

  • Mount: data-component="Checklist"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ClickableCard

Reusable clickable card component.

  • Mount: data-component="ClickableCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

Code

Reusable code component.

  • Mount: data-component="Code"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CodeBlock

Reusable code block component.

  • Mount: data-component="CodeBlock"
  • Props: language: string = "text", filename: string = "", code: string = ""
  • Slots: None
  • Events: click

CodeTabs

Reusable code tabs component.

  • Mount: data-component="CodeTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CodeText

Reusable code text component.

  • Mount: data-component="CodeText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ColorSwatch

Reusable color swatch component.

  • Mount: data-component="ColorSwatch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CommandBlock

Reusable command block component.

  • Mount: data-component="CommandBlock"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ComplianceProgramCard

Reusable compliance program card component.

  • Mount: data-component="ComplianceProgramCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ConnectedAccountCard

Reusable connected account card component.

  • Mount: data-component="ConnectedAccountCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ConnectionCard

Reusable connection card component.

  • Mount: data-component="ConnectionCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ConsentTimelinePreview

Reusable consent timeline preview component.

  • Mount: data-component="ConsentTimelinePreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ContactCard

Reusable contact card component.

  • Mount: data-component="ContactCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ContactForm

Reusable contact form component.

  • Mount: data-component="ContactForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ContactSalesForm

Reusable contact sales form component.

  • Mount: data-component="ContactSalesForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ContextSwitcher

Reusable context switcher component.

  • Mount: data-component="ContextSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ConversationPreview

Reusable conversation preview component.

  • Mount: data-component="ConversationPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CostSummary

Reusable cost summary component.

  • Mount: data-component="CostSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CronBuilder

Reusable cron builder component.

  • Mount: data-component="CronBuilder"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CsvUpload

Reusable csv upload component.

  • Mount: data-component="CsvUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Reusable customer logo component.

  • Mount: data-component="CustomerLogo"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

CustomerStoryCard

Reusable customer story card component.

  • Mount: data-component="CustomerStoryCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DataProtectionCard

Reusable data protection card component.

  • Mount: data-component="DataProtectionCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DateRangeCalendar

Reusable date range calendar component.

  • Mount: data-component="DateRangeCalendar"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DateRangeSlider

Reusable date range slider component.

  • Mount: data-component="DateRangeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DeliveryPreview

Reusable delivery preview component.

  • Mount: data-component="DeliveryPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DemoRequestForm

Reusable demo request form component.

  • Mount: data-component="DemoRequestForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DeveloperSearch

Reusable developer search component.

  • Mount: data-component="DeveloperSearch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DeviceCard

Reusable device card component.

  • Mount: data-component="DeviceCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DocumentPreview

Reusable document preview component.

  • Mount: data-component="DocumentPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DocumentUpload

Reusable document upload component.

  • Mount: data-component="DocumentUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DownloadGateForm

Reusable download gate form component.

  • Mount: data-component="DownloadGateForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DownloadResourceForm

Reusable download resource form component.

  • Mount: data-component="DownloadResourceForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

DurationSlider

Reusable duration slider component.

  • Mount: data-component="DurationSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ElevatedCard

Reusable elevated card component.

  • Mount: data-component="ElevatedCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

EmailComposer

Reusable email composer component.

  • Mount: data-component="EmailComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

EnterprisePricingCard

Reusable enterprise pricing card component.

  • Mount: data-component="EnterprisePricingCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

EnvironmentSwitcher

Reusable environment switcher component.

  • Mount: data-component="EnvironmentSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ErrorCard

Reusable error card component.

  • Mount: data-component="ErrorCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ErrorCode

Reusable error code component.

  • Mount: data-component="ErrorCode"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ErrorIllustration

Reusable error illustration component.

  • Mount: data-component="ErrorIllustration"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ErrorPage

Reusable error page component.

  • Mount: data-component="ErrorPage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

EstimatedCostSummary

Reusable estimated cost summary component.

  • Mount: data-component="EstimatedCostSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ExpandableText

Reusable expandable text component.

  • Mount: data-component="ExpandableText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

EyebrowText

Reusable eyebrow text component.

  • Mount: data-component="EyebrowText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

FactorCard

Reusable factor card component.

  • Mount: data-component="FactorCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FallbackRouteBuilder

Reusable fallback route builder component.

  • Mount: data-component="FallbackRouteBuilder"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FaviconUpload

Reusable favicon upload component.

  • Mount: data-component="FaviconUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FeatureCard

Reusable feature card component.

  • Mount: data-component="FeatureCard"
  • Props: icon: string = "✦", title: string = "Feature", description: string = "", href: string = ""
  • Slots: None
  • Events: None

FeatureChecklist

Reusable feature checklist component.

  • Mount: data-component="FeatureChecklist"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FeaturedBlogCard

Reusable featured blog card component.

  • Mount: data-component="FeaturedBlogCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FeatureIconCard

Reusable feature icon card component.

  • Mount: data-component="FeatureIconCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FeatureTabs

Reusable feature tabs component.

  • Mount: data-component="FeatureTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FileSizeLabel

Reusable file size label component.

  • Mount: data-component="FileSizeLabel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

FileUpload

Reusable file upload component.

  • Mount: data-component="FileUpload"
  • Props: id: string = "file", name: string = "file", label: string = "Upload file", accept: string = "", multiple: boolean = false, help: string = "Drag and drop or browse"
  • Slots: None
  • Events: None

FooterLanguageSwitcher

Reusable footer language switcher component.

  • Mount: data-component="FooterLanguageSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ForbiddenPage

Reusable forbidden page component.

  • Mount: data-component="ForbiddenPage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ForgotPasswordForm

Reusable forgot password form component.

  • Mount: data-component="ForgotPasswordForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Form

Reusable form component.

  • Mount: data-component="Form"
  • Props: action: string = "", method: string = "post", name: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FormErrorSummary

Reusable form error summary component.

  • Mount: data-component="FormErrorSummary"
  • Props: title: string = "Please fix the following", visible: boolean = true
  • Slots: default
  • Events: None

FormHelpText

Reusable form help text component.

  • Mount: data-component="FormHelpText"
  • Props: id: string = "", text: string = "", class: string = ""
  • Slots: default
  • Events: None

FormLabel

Reusable form label component.

  • Mount: data-component="FormLabel"
  • Props: for: string = "", label: string = "Label", required: boolean = false, optional: boolean = false, class: string = ""
  • Slots: None
  • Events: None

GlassCard

Reusable glass card component.

  • Mount: data-component="GlassCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

GlobalSearch

Reusable global search component.

  • Mount: data-component="GlobalSearch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

GuideCard

Reusable guide card component.

  • Mount: data-component="GuideCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

GuideChecklist

Reusable guide checklist component.

  • Mount: data-component="GuideChecklist"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

GuideStep

Reusable guide step component.

  • Mount: data-component="GuideStep"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HeroGradientText

Reusable hero gradient text component.

  • Mount: data-component="HeroGradientText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HeroProductPreview

Reusable hero product preview component.

  • Mount: data-component="HeroProductPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HeroTrustText

Reusable hero trust text component.

  • Mount: data-component="HeroTrustText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HighlightText

Reusable highlight text component.

  • Mount: data-component="HighlightText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HolidayCalendar

Reusable holiday calendar component.

  • Mount: data-component="HolidayCalendar"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

HumanApprovalStep

Reusable human approval step component.

  • Mount: data-component="HumanApprovalStep"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Icon

Reusable icon component.

  • Mount: data-component="Icon"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Illustration

Reusable illustration component.

  • Mount: data-component="Illustration"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ImageCompressionPreview

Reusable image compression preview component.

  • Mount: data-component="ImageCompressionPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ImageUpload

Reusable image upload component.

  • Mount: data-component="ImageUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

IncidentCard

Reusable incident card component.

  • Mount: data-component="IncidentCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

InfoCard

Reusable info card component.

  • Mount: data-component="InfoCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

InlineCode

Reusable inline code component.

  • Mount: data-component="InlineCode"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

IntegrationCard

Reusable integration card component.

  • Mount: data-component="IntegrationCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

InvoiceLineItem

Reusable invoice line item component.

  • Mount: data-component="InvoiceLineItem"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

InvoiceSummary

Reusable invoice summary component.

  • Mount: data-component="InvoiceSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

JobCard

Reusable job card component.

  • Mount: data-component="JobCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

JsonViewer

Reusable json viewer component.

  • Mount: data-component="JsonViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

KycDocumentUpload

Reusable kyc document upload component.

  • Mount: data-component="KycDocumentUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

LanguageSwitcher

Reusable language switcher component.

  • Mount: data-component="LanguageSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

LeadText

Reusable lead text component.

  • Mount: data-component="LeadText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

LegalContactBlock

Reusable legal contact block component.

  • Mount: data-component="LegalContactBlock"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

LegalSummary

Reusable legal summary component.

  • Mount: data-component="LegalSummary"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Reusable logo component.

  • Mount: data-component="Logo"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

LogoUpload

Reusable logo upload component.

  • Mount: data-component="LogoUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MaintenanceCard

Reusable maintenance card component.

  • Mount: data-component="MaintenanceCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MaintenancePage

Reusable maintenance page component.

  • Mount: data-component="MaintenancePage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MessageComposer

Reusable message composer component.

  • Mount: data-component="MessageComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MessageComposerPreview

Reusable message composer preview component.

  • Mount: data-component="MessageComposerPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MessagePreview

Reusable message preview component.

  • Mount: data-component="MessagePreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MessageVolumeSlider

Reusable message volume slider component.

  • Mount: data-component="MessageVolumeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MetricCard

Reusable metric card component.

  • Mount: data-component="MetricCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MetricText

Reusable metric text component.

  • Mount: data-component="MetricText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

MobileTableCard

Reusable mobile table card component.

  • Mount: data-component="MobileTableCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MultiFileUpload

Reusable multi file upload component.

  • Mount: data-component="MultiFileUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

MutedText

Reusable muted text component.

  • Mount: data-component="MutedText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

NavigationItem

Reusable navigation item component.

  • Mount: data-component="NavigationItem"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

NewsletterForm

Reusable newsletter form component.

  • Mount: data-component="NewsletterForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

NotFoundPage

Reusable not found page component.

  • Mount: data-component="NotFoundPage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

NotificationCard

Reusable notification card component.

  • Mount: data-component="NotificationCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

OfficeCard

Reusable office card component.

  • Mount: data-component="OfficeCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

OfflinePage

Reusable offline page component.

  • Mount: data-component="OfflinePage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

OneTimeSecretDisplay

Reusable one time secret display component.

  • Mount: data-component="OneTimeSecretDisplay"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

OpacitySlider

Reusable opacity slider component.

  • Mount: data-component="OpacitySlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

OtpVerificationForm

Reusable otp verification form component.

  • Mount: data-component="OtpVerificationForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

OutlinedCard

Reusable outlined card component.

  • Mount: data-component="OutlinedCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

PartnerApplicationForm

Reusable partner application form component.

  • Mount: data-component="PartnerApplicationForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PartnerProgramCard

Reusable partner program card component.

  • Mount: data-component="PartnerProgramCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PaymentMethodCard

Reusable payment method card component.

  • Mount: data-component="PaymentMethodCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PdfPreview

Reusable pdf preview component.

  • Mount: data-component="PdfPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PlatformPillarCard

Reusable platform pillar card component.

  • Mount: data-component="PlatformPillarCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PressReleaseCard

Reusable press release card component.

  • Mount: data-component="PressReleaseCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PriceRangeSlider

Reusable price range slider component.

  • Mount: data-component="PriceRangeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PriceText

Reusable price text component.

  • Mount: data-component="PriceText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

PricingCard

Reusable pricing card component.

  • Mount: data-component="PricingCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PricingContactForm

Reusable pricing contact form component.

  • Mount: data-component="PricingContactForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PricingPlanCard

Reusable pricing plan card component.

  • Mount: data-component="PricingPlanCard"
  • Props: name: string = "Starter", description: string = "", price: string = "₹0", period: string = "/month", featured: boolean = false, ctaLabel: string = "Choose plan", ctaHref: string = "#"
  • Slots: default
  • Events: None

ProductCard

Reusable product card component.

  • Mount: data-component="ProductCard"
  • Props: eyebrow: string = "Product", title: string = "Product name", description: string = "", href: string = "#", actionLabel: string = "Learn more", status: string = "", class: string = ""
  • Slots: None
  • Events: None

ProductIcon

Reusable product icon component.

  • Mount: data-component="ProductIcon"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Reusable product logo component.

  • Mount: data-component="ProductLogo"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ProductMiniCard

Reusable product mini card component.

  • Mount: data-component="ProductMiniCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ProductNavigationCard

Reusable product navigation card component.

  • Mount: data-component="ProductNavigationCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ProgressSlider

Reusable progress slider component.

  • Mount: data-component="ProgressSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ProjectCard

Reusable project card component.

  • Mount: data-component="ProjectCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ProjectSwitcher

Reusable project switcher component.

  • Mount: data-component="ProjectSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Reusable public header logo component.

  • Mount: data-component="PublicHeaderLogo"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

PushComposer

Reusable push composer component.

  • Mount: data-component="PushComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

QrCode

Reusable qr code component.

  • Mount: data-component="QrCode"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

QuantityStepper

Reusable quantity stepper component.

  • Mount: data-component="QuantityStepper"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

QuoteText

Reusable quote text component.

  • Mount: data-component="QuoteText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

RangeSlider

Reusable range slider component.

  • Mount: data-component="RangeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RateLimitPage

Reusable rate limit page component.

  • Mount: data-component="RateLimitPage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RatingSlider

Reusable rating slider component.

  • Mount: data-component="RatingSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RecoveryCodeForm

Reusable recovery code form component.

  • Mount: data-component="RecoveryCodeForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RecurrenceRuleBuilder

Reusable recurrence rule builder component.

  • Mount: data-component="RecurrenceRuleBuilder"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ReportCard

Reusable report card component.

  • Mount: data-component="ReportCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RequestResponseViewer

Reusable request response viewer component.

  • Mount: data-component="RequestResponseViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

RequestViewer

Reusable request viewer component.

  • Mount: data-component="RequestViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ResetPasswordForm

Reusable reset password form component.

  • Mount: data-component="ResetPasswordForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ResourceCard

Reusable resource card component.

  • Mount: data-component="ResourceCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ResourceDownloadCard

Reusable resource download card component.

  • Mount: data-component="ResourceDownloadCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ResourceSearch

Reusable resource search component.

  • Mount: data-component="ResourceSearch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ResponseViewer

Reusable response viewer component.

  • Mount: data-component="ResponseViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SDKCard

Reusable s d k card component.

  • Mount: data-component="SDKCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SDKLanguageTabs

Reusable s d k language tabs component.

  • Mount: data-component="SDKLanguageTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SearchCategoryTabs

Reusable search category tabs component.

  • Mount: data-component="SearchCategoryTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SearchResultItem

Reusable search result item component.

  • Mount: data-component="SearchResultItem"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SecretDisplay

Reusable secret display component.

  • Mount: data-component="SecretDisplay"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SecurityContactCard

Reusable security contact card component.

  • Mount: data-component="SecurityContactCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SecurityFeatureCard

Reusable security feature card component.

  • Mount: data-component="SecurityFeatureCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SecurityReportForm

Reusable security report form component.

  • Mount: data-component="SecurityReportForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ServerErrorPage

Reusable server error page component.

  • Mount: data-component="ServerErrorPage"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SessionCard

Reusable session card component.

  • Mount: data-component="SessionCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SetupChecklist

Reusable setup checklist component.

  • Mount: data-component="SetupChecklist"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SignInForm

Reusable sign in form component.

  • Mount: data-component="SignInForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SignUpForm

Reusable sign up form component.

  • Mount: data-component="SignUpForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SiteSearch

Reusable site search component.

  • Mount: data-component="SiteSearch"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Slider

Reusable slider component.

  • Mount: data-component="Slider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SmallText

Reusable small text component.

  • Mount: data-component="SmallText"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SmsComposer

Reusable sms composer component.

  • Mount: data-component="SmsComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

StatCard

Reusable stat card component.

  • Mount: data-component="StatCard"
  • Props: label: string = "Metric", value: string = "0", change: string = "", trend: string = "neutral"
  • Slots: None
  • Events: None

StatusSubscribeForm

Reusable status subscribe form component.

  • Mount: data-component="StatusSubscribeForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Stepper

Reusable stepper component.

  • Mount: data-component="Stepper"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

SuccessCard

Reusable success card component.

  • Mount: data-component="SuccessCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

SupportRequestForm

Reusable support request form component.

  • Mount: data-component="SupportRequestForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Tabs

Reusable tabs component.

  • Mount: data-component="Tabs"
  • Props: active: string = "first"
  • Slots: first, second
  • Events: click

TeamMemberCard

Reusable team member card component.

  • Mount: data-component="TeamMemberCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

TemplateCard

Reusable template card component.

  • Mount: data-component="TemplateCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

TerminalBlock

Reusable terminal block component.

  • Mount: data-component="TerminalBlock"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

TestimonialCard

Reusable testimonial card component.

  • Mount: data-component="TestimonialCard"
  • Props: quote: string = "Great product.", name: string = "Customer", role: string = "", company: string = "", avatar: string = ""
  • Slots: None
  • Events: None

TestimonialCarousel

Reusable testimonial carousel component.

  • Mount: data-component="TestimonialCarousel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ThemeSwitcher

Reusable theme switcher component.

  • Mount: data-component="ThemeSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

TimelineItem

Reusable timeline item component.

  • Mount: data-component="TimelineItem"
  • Props: title: string = "Event", date: string = "", description: string = "", status: string = "default"
  • Slots: None
  • Events: None

ToastIcon

Reusable toast icon component.

  • Mount: data-component="ToastIcon"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Tooltip

Reusable tooltip component.

  • Mount: data-component="Tooltip"
  • Props: text: string = "Helpful information", position: string = "top"
  • Slots: default
  • Events: None

TotpVerificationForm

Reusable totp verification form component.

  • Mount: data-component="TotpVerificationForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

TranslatedText

Reusable translated text component.

  • Mount: data-component="TranslatedText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

TruncatedText

Reusable truncated text component.

  • Mount: data-component="TruncatedText"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

UnifiedTimelinePreview

Reusable unified timeline preview component.

  • Mount: data-component="UnifiedTimelinePreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

UploadItem

Reusable upload item component.

  • Mount: data-component="UploadItem"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

UploadPreview

Reusable upload preview component.

  • Mount: data-component="UploadPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

UserCard

Reusable user card component.

  • Mount: data-component="UserCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

ValueCard

Reusable value card component.

  • Mount: data-component="ValueCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

VerticalTabs

Reusable vertical tabs component.

  • Mount: data-component="VerticalTabs"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

VideoCard

Reusable video card component.

  • Mount: data-component="VideoCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

VideoUpload

Reusable video upload component.

  • Mount: data-component="VideoUpload"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

VoiceScriptComposer

Reusable voice script composer component.

  • Mount: data-component="VoiceScriptComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

VolumeSlider

Reusable volume slider component.

  • Mount: data-component="VolumeSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WarningCard

Reusable warning card component.

  • Mount: data-component="WarningCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

WebhookEventCard

Reusable webhook event card component.

  • Mount: data-component="WebhookEventCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WebhookPayloadViewer

Reusable webhook payload viewer component.

  • Mount: data-component="WebhookPayloadViewer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WebinarCard

Reusable webinar card component.

  • Mount: data-component="WebinarCard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WebinarRegistrationForm

Reusable webinar registration form component.

  • Mount: data-component="WebinarRegistrationForm"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WhatsAppComposer

Reusable whats app composer component.

  • Mount: data-component="WhatsAppComposer"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Wizard

Reusable wizard component.

  • Mount: data-component="Wizard"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WorkflowCanvasPreview

Reusable workflow canvas preview component.

  • Mount: data-component="WorkflowCanvasPreview"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

WorkspaceCard

Reusable workspace card component.

  • Mount: data-component="WorkspaceCard"
  • Props: title: string = "", description: string = "", href: string = "", class: string = ""
  • Slots: default
  • Events: None

WorkspaceSwitcher

Reusable workspace switcher component.

  • Mount: data-component="WorkspaceSwitcher"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

ZoomSlider

Reusable zoom slider component.

  • Mount: data-component="ZoomSlider"
  • Props: eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "Learn more", image: string = "", alt: string = "", class: string = ""
  • Slots: default
  • Events: None

Core

AnnouncementBar

Reusable announcement bar component.

  • Mount: data-component="AnnouncementBar"
  • Props: badge: string = "New", message: string = "WrNexus Organizations is now available.", description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO.", href: string = "/organizations", actionLabel: string = "Explore organizations", ariaLabel: string = "Announcement"
  • Slots: None
  • Events: click

AspectRatio

Reusable aspect ratio component.

  • Mount: data-component="AspectRatio"
  • Props: class: string = ""
  • Slots: default
  • Events: None

BackToTop

Reusable back to top component.

  • Mount: data-component="BackToTop"
  • Props: label: string = "Back to top", assistiveLabel: string = "Return to the top of the page", threshold: number = 500
  • Slots: None
  • Events: click

Breadcrumbs

Reusable breadcrumbs component.

  • Mount: data-component="Breadcrumbs"
  • Props: homeLabel: string = "Home", homeHref: string = "/", current: string = "Current page"
  • Slots: None
  • Events: None

Checkbox

Reusable checkbox component.

  • Mount: data-component="Checkbox"
  • Props: id: string = "", name: string = "", label: string = "Checkbox", description: string = "", checked: boolean = false, disabled: boolean = false
  • Slots: None
  • Events: None

Chip

Reusable chip component.

  • Mount: data-component="Chip"
  • Props: label: string = "Chip", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Cluster

Reusable cluster component.

  • Mount: data-component="Cluster"
  • Props: gap: string = "4", className: string = ""
  • Slots: default
  • Events: None

Combobox

Reusable combobox component.

  • Mount: data-component="Combobox"
  • Props: id: string = "combobox", name: string = "", label: string = "Choose an option", placeholder: string = "Search options", options: string = [], required: boolean = false, disabled: boolean = false, class: string = ""
  • Slots: None
  • Events: None

Container

Reusable container component.

  • Mount: data-component="Container"
  • Props: size: string = "default", className: string = ""
  • Slots: default
  • Events: None

disclosure

Reusable disclosure component.

  • Mount: data-component="disclosure"
  • Props: summary: string = "Details", class: string = ""
  • Slots: default
  • Events: None

DisplayHeading

Reusable display heading component.

  • Mount: data-component="DisplayHeading"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Divider

Reusable divider component.

  • Mount: data-component="Divider"
  • Props: className: string = ""
  • Slots: default
  • Events: None

Drawer

Reusable drawer component.

  • Mount: data-component="Drawer"
  • Props: title: string = "Panel", open: boolean = false, side: string = "right"
  • Slots: default
  • Events: click

FAQ

Reusable faq component.

  • Mount: data-component="FAQ"
  • Props: eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, allowMultiple: boolean = false, defaultOpenIndex: number = 0
  • Slots: None
  • Events: None

FAQAccordion

Reusable faqaccordion component.

  • Mount: data-component="FAQAccordion"
  • Props: eyebrow: string = "", title: string = "Frequently asked questions", description: string = "", items: string = [], centered: boolean = true, compact: boolean = false, allowMultiple: boolean = false, defaultOpenIndex: number = 0, showContact: boolean = false, contactText: string = "Still have questions?", contactLabel: string = "Contact support", contactHref: string = "/support"
  • Slots: None
  • Events: click

file-upload

Reusable file-upload component.

  • Mount: data-component="file-upload"
  • Props: store: string = "public", endpoint: string = "/api/upload", accept: string = "", multiple: boolean = false, max: number = 0, label: string = "Drag files here or click to browse", class: string = ""
  • Slots: None
  • Events: None

FilterBar

Reusable filter bar component.

  • Mount: data-component="FilterBar"
  • Props: label: string = "Filters", clearLabel: string = "Clear filters", showClear: boolean = true, class: string = ""
  • Slots: default
  • Events: None

Flex

Reusable flex component.

  • Mount: data-component="Flex"
  • Props: class: string = ""
  • Slots: default
  • Events: None

FormError

Reusable form error component.

  • Mount: data-component="FormError"
  • Props: id: string = "", message: string = "", class: string = ""
  • Slots: default
  • Events: None

FullBleed

Reusable full bleed component.

  • Mount: data-component="FullBleed"
  • Props: class: string = ""
  • Slots: default
  • Events: None

hstack

Reusable hstack component.

  • Mount: data-component="hstack"
  • Props: gap: string = "4", align: string = "center", class: string = ""
  • Slots: default
  • Events: None

Inline

Reusable inline component.

  • Mount: data-component="Inline"
  • Props: gap: string = "4", className: string = ""
  • Slots: default
  • Events: None

input

Reusable input component.

  • Mount: data-component="input"
  • Props: type: string = "text", name: string = "", value: string = "", placeholder: string = "", class: string = ""
  • Slots: None
  • Events: None

LegalTableOfContents

Reusable legal table of contents component.

  • Mount: data-component="LegalTableOfContents"
  • Props: title: string = "On this page", items: string = [], class: string = ""
  • Slots: None
  • Events: None

Reusable link component.

  • Mount: data-component="Link"
  • Props: href: string = "#", label: string = "Link", external: boolean = false, className: string = ""
  • Slots: None
  • Events: None

LogoCloud

Reusable logo cloud component.

  • Mount: data-component="LogoCloud"
  • Props: title: string = "Trusted by modern teams"
  • Slots: default
  • Events: None

Modal

Reusable modal component.

  • Mount: data-component="Modal"
  • Props: title: string = "Dialog", description: string = "", open: boolean = false, size: string = "md", closeLabel: string = "Close"
  • Slots: default
  • Events: click

MultiSelect

Reusable multi select component.

  • Mount: data-component="MultiSelect"
  • Props: id: string = "multi-select", name: string = "", label: string = "Choose options", options: string = [], required: boolean = false, disabled: boolean = false, size: number = 5, class: string = ""
  • Slots: None
  • Events: None

NarrowContainer

Reusable narrow container component.

  • Mount: data-component="NarrowContainer"
  • Props: class: string = ""
  • Slots: default
  • Events: None

NotificationDot

Reusable notification dot component.

  • Mount: data-component="NotificationDot"
  • Props: label: string = "Notification", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

PageHeading

Reusable page heading component.

  • Mount: data-component="PageHeading"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

PageShell

Reusable page shell component.

  • Mount: data-component="PageShell"
  • Props: className: string = ""
  • Slots: default
  • Events: None

Pagination

Reusable pagination component.

  • Mount: data-component="Pagination"
  • Props: page: number = 1, totalPages: number = 1, previousHref: string = "#", nextHref: string = "#"
  • Slots: None
  • Events: None

Pill

Reusable pill component.

  • Mount: data-component="Pill"
  • Props: label: string = "Pill", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

progress

Reusable progress component.

  • Mount: data-component="progress"
  • Props: value: number = 0, max: number = 100, class: string = ""
  • Slots: None
  • Events: None

ProgressBar

Reusable progress bar component.

  • Mount: data-component="ProgressBar"
  • Props: value: number = 0, max: number = 100, label: string = "Progress", showValue: boolean = true
  • Slots: None
  • Events: None

PublicFooter

Reusable public footer component.

  • Mount: data-component="PublicFooter"
  • Props: brand: string = "WRNexusJS", description: string = "SSR-first, Bun-native full-stack framework.", copyright: string = "© 2026 WorkRoot Workspace"
  • Slots: default
  • Events: None

Radio

Reusable radio component.

  • Mount: data-component="Radio"
  • Props: id: string = "", name: string = "choice", value: string = "", label: string = "Option", description: string = "", checked: boolean = false, disabled: boolean = false
  • Slots: None
  • Events: None

ScrollArea

Reusable scroll area component.

  • Mount: data-component="ScrollArea"
  • Props: class: string = ""
  • Slots: default
  • Events: None

SDKTabs

Reusable sdktabs component.

  • Mount: data-component="SDKTabs"
  • Props: label: string = "SDK languages", tabs: string = [], defaultIndex: number = 0, class: string = ""
  • Slots: None
  • Events: click

SectionHeading

Reusable section heading component.

  • Mount: data-component="SectionHeading"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Select

Reusable select component.

  • Mount: data-component="Select"
  • Props: id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
  • Slots: default
  • Events: None

spacer

Reusable spacer component.

  • Mount: data-component="spacer"
  • Props: class: string = ""
  • Slots: None
  • Events: None

Spinner

Reusable spinner component.

  • Mount: data-component="Spinner"
  • Props: label: string = "Loading", size: string = "md"
  • Slots: None
  • Events: None

Stack

Reusable stack component.

  • Mount: data-component="Stack"
  • Props: gap: string = "4", className: string = ""
  • Slots: default
  • Events: None

Sticky

Reusable sticky component.

  • Mount: data-component="Sticky"
  • Props: class: string = ""
  • Slots: default
  • Events: None

SubsectionHeading

Reusable subsection heading component.

  • Mount: data-component="SubsectionHeading"
  • Props: text: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Surface

Reusable surface component.

  • Mount: data-component="Surface"
  • Props: class: string = ""
  • Slots: default
  • Events: None

Switch

Reusable switch component.

  • Mount: data-component="Switch"
  • Props: id: string = "", name: string = "", label: string = "Switch", description: string = "", checked: boolean = false, disabled: boolean = false
  • Slots: None
  • Events: click

tag

Reusable tag component.

  • Mount: data-component="tag"
  • Props: label: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Textarea

Reusable textarea component.

  • Mount: data-component="Textarea"
  • Props: id: string = "", name: string = "", label: string = "Message", value: string = "", placeholder: string = "", rows: number = 5, help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
  • Slots: None
  • Events: None

theme-toggle

Reusable theme-toggle component.

  • Mount: data-component="theme-toggle"
  • Props: label: string = "Toggle theme", class: string = ""
  • Slots: default
  • Events: None

Toast

Reusable toast component.

  • Mount: data-component="Toast"
  • Props: title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
  • Slots: None
  • Events: click

Typography

Reusable typography component.

  • Mount: data-component="Typography"
  • Props: as: string = "p", variant: string = "body", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

VisuallyHidden

Reusable visually hidden component.

  • Mount: data-component="VisuallyHidden"
  • Props: className: string = ""
  • Slots: default
  • Events: None

Well

Reusable well component.

  • Mount: data-component="Well"
  • Props: class: string = ""
  • Slots: default
  • Events: None

WideContainer

Reusable wide container component.

  • Mount: data-component="WideContainer"
  • Props: class: string = ""
  • Slots: default
  • Events: None

Data

ActiveFilterList

Reusable active filter list component.

  • Mount: data-component="ActiveFilterList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ActivityList

Reusable activity list component.

  • Mount: data-component="ActivityList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ApiHeaderTable

Reusable api header table component.

  • Mount: data-component="ApiHeaderTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ApiParameterTable

Reusable api parameter table component.

  • Mount: data-component="ApiParameterTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ApiSchemaTable

Reusable api schema table component.

  • Mount: data-component="ApiSchemaTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

AuditTable

Reusable audit table component.

  • Mount: data-component="AuditTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

AutoGrid

Reusable auto grid component.

  • Mount: data-component="AutoGrid"
  • Props: class: string = ""
  • Slots: default
  • Events: None

BlogGrid

Reusable blog grid component.

  • Mount: data-component="BlogGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

BlogList

Reusable blog list component.

  • Mount: data-component="BlogList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CalendarGrid

Reusable calendar grid component.

  • Mount: data-component="CalendarGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CapabilityGrid

Reusable capability grid component.

  • Mount: data-component="CapabilityGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CareerBenefitsGrid

Reusable career benefits grid component.

  • Mount: data-component="CareerBenefitsGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ChannelComparisonTable

Reusable channel comparison table component.

  • Mount: data-component="ChannelComparisonTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ChannelRateTable

Reusable channel rate table component.

  • Mount: data-component="ChannelRateTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ColorGrid

Reusable color grid component.

  • Mount: data-component="ColorGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ComparisonTable

Reusable comparison table component.

  • Mount: data-component="ComparisonTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ComplianceBadgeList

Reusable compliance badge list component.

  • Mount: data-component="ComplianceBadgeList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ConversationList

Reusable conversation list component.

  • Mount: data-component="ConversationList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CookieCategoryList

Reusable cookie category list component.

  • Mount: data-component="CookieCategoryList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CookieDetailsTable

Reusable cookie details table component.

  • Mount: data-component="CookieDetailsTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

CookieTable

Reusable cookie table component.

  • Mount: data-component="CookieTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

DataRetentionTable

Reusable data retention table component.

  • Mount: data-component="DataRetentionTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

DataTable

Reusable data table component.

  • Mount: data-component="DataTable"
  • Props: caption: string = "Data table", columns: string = [], rows: string = [], emptyMessage: string = "No data available.", striped: boolean = false, class: string = ""
  • Slots: None
  • Events: None

DefinitionList

Reusable definition list component.

  • Mount: data-component="DefinitionList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

DescriptionList

Reusable description list component.

  • Mount: data-component="DescriptionList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

EventTable

Reusable event table component.

  • Mount: data-component="EventTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FeatureComparisonTable

Reusable feature comparison table component.

  • Mount: data-component="FeatureComparisonTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FeatureGrid

Reusable feature grid component.

  • Mount: data-component="FeatureGrid"
  • Props: columns: number = 3, className: string = ""
  • Slots: default
  • Events: None

FeatureList

Reusable feature list component.

  • Mount: data-component="FeatureList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FileList

Reusable file list component.

  • Mount: data-component="FileList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FilterableTable

Reusable filterable table component.

  • Mount: data-component="FilterableTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FormGrid

Reusable form grid component.

  • Mount: data-component="FormGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

FormRow

Reusable form row component.

  • Mount: data-component="FormRow"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

Grid

Reusable grid component.

  • Mount: data-component="Grid"
  • Props: gap: string = "4", className: string = ""
  • Slots: default
  • Events: None

GuideGrid

Reusable guide grid component.

  • Mount: data-component="GuideGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

IncidentList

Reusable incident list component.

  • Mount: data-component="IncidentList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

KeyValueTable

Reusable key value table component.

  • Mount: data-component="KeyValueTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

LeadershipGrid

Reusable leadership grid component.

  • Mount: data-component="LeadershipGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

LegalBulletList

Reusable legal bullet list component.

  • Mount: data-component="LegalBulletList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

LegalDefinitionList

Reusable legal definition list component.

  • Mount: data-component="LegalDefinitionList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

LegalTable

Reusable legal table component.

  • Mount: data-component="LegalTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

List

Reusable list component.

  • Mount: data-component="List"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

LogTable

Reusable log table component.

  • Mount: data-component="LogTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

MemberList

Reusable member list component.

  • Mount: data-component="MemberList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

MetricGrid

Reusable metric grid component.

  • Mount: data-component="MetricGrid"
  • Props: label: string = "Key metrics", metrics: string = [], class: string = ""
  • Slots: None
  • Events: None

NotificationList

Reusable notification list component.

  • Mount: data-component="NotificationList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PartnerLogoGrid

Reusable partner logo grid component.

  • Mount: data-component="PartnerLogoGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PasswordRequirementList

Reusable password requirement list component.

  • Mount: data-component="PasswordRequirementList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PlanFeatureList

Reusable plan feature list component.

  • Mount: data-component="PlanFeatureList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PlanLimitList

Reusable plan limit list component.

  • Mount: data-component="PlanLimitList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PolicyVersionTable

Reusable policy version table component.

  • Mount: data-component="PolicyVersionTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PricingComparisonTable

Reusable pricing comparison table component.

  • Mount: data-component="PricingComparisonTable"
  • Props: caption: string = "Plan comparison", plans: string = [], features: string = [], class: string = ""
  • Slots: None
  • Events: None

PricingGrid

Reusable pricing grid component.

  • Mount: data-component="PricingGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

PricingTable

Reusable pricing table component.

  • Mount: data-component="PricingTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ProductFeatureList

Reusable product feature list component.

  • Mount: data-component="ProductFeatureList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ProductGrid

Reusable product grid component.

  • Mount: data-component="ProductGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ProductIntegrationList

Reusable product integration list component.

  • Mount: data-component="ProductIntegrationList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ProductList

Reusable product list component.

  • Mount: data-component="ProductList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ProductUseCaseList

Reusable product use case list component.

  • Mount: data-component="ProductUseCaseList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

RateTable

Reusable rate table component.

  • Mount: data-component="RateTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

RegionAvailabilityTable

Reusable region availability table component.

  • Mount: data-component="RegionAvailabilityTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ResponsiveTable

Reusable responsive table component.

  • Mount: data-component="ResponsiveTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

RetentionTable

Reusable retention table component.

  • Mount: data-component="RetentionTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

SecurityPillarGrid

Reusable security pillar grid component.

  • Mount: data-component="SecurityPillarGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

SecurityPracticeList

Reusable security practice list component.

  • Mount: data-component="SecurityPracticeList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ServiceLevelTable

Reusable service level table component.

  • Mount: data-component="ServiceLevelTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ServiceStatusList

Reusable service status list component.

  • Mount: data-component="ServiceStatusList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ServiceStatusRow

Reusable service status row component.

  • Mount: data-component="ServiceStatusRow"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

SlaTable

Reusable sla table component.

  • Mount: data-component="SlaTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

SortableTable

Reusable sortable table component.

  • Mount: data-component="SortableTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

StatusTable

Reusable status table component.

  • Mount: data-component="StatusTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

SubprocessorTable

Reusable subprocessor table component.

  • Mount: data-component="SubprocessorTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

Table

Reusable table component.

  • Mount: data-component="Table"
  • Props: caption: string = "Data table", responsive: boolean = true
  • Slots: default
  • Events: None

TableRow

Reusable table row component.

  • Mount: data-component="TableRow"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

TreeTable

Reusable tree table component.

  • Mount: data-component="TreeTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

TrustBadgeList

Reusable trust badge list component.

  • Mount: data-component="TrustBadgeList"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

UsagePricingTable

Reusable usage pricing table component.

  • Mount: data-component="UsagePricingTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

ValuesGrid

Reusable values grid component.

  • Mount: data-component="ValuesGrid"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

VirtualizedTable

Reusable virtualized table component.

  • Mount: data-component="VirtualizedTable"
  • Props: title: string = "", description: string = "", empty: boolean = false, emptyText: string = "No items available.", class: string = ""
  • Slots: default
  • Events: None

Feedback

AccountStatusBanner

Reusable account status banner component.

  • Mount: data-component="AccountStatusBanner"
  • Props: label: string = "AccountStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Alert

Reusable alert component.

  • Mount: data-component="Alert"
  • Props: title: string = "Notice", description: string = "", variant: string = "info", dismissible: boolean = false
  • Slots: default
  • Events: click

ApiAuthenticationNotice

Reusable api authentication notice component.

  • Mount: data-component="ApiAuthenticationNotice"
  • Props: label: string = "ApiAuthentication", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ApiMethodBadge

Reusable api method badge component.

  • Mount: data-component="ApiMethodBadge"
  • Props: label: string = "ApiMethod", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ApiRateLimitNotice

Reusable api rate limit notice component.

  • Mount: data-component="ApiRateLimitNotice"
  • Props: label: string = "ApiRateLimit", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ApiVersionBadge

Reusable api version badge component.

  • Mount: data-component="ApiVersionBadge"
  • Props: label: string = "ApiVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Badge

Reusable badge component.

  • Mount: data-component="Badge"
  • Props: label: string = "Badge", variant: string = "neutral"
  • Slots: None
  • Events: None

Banner

Reusable banner component.

  • Mount: data-component="Banner"
  • Props: text: string = "Announcement", href: string = "", actionLabel: string = "Learn more", variant: string = "brand"
  • Slots: None
  • Events: None

BetaBadge

Reusable beta badge component.

  • Mount: data-component="BetaBadge"
  • Props: label: string = "Beta", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

CardSkeleton

Reusable card skeleton component.

  • Mount: data-component="CardSkeleton"
  • Props: label: string = "Card", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

CertificationBadge

Reusable certification badge component.

  • Mount: data-component="CertificationBadge"
  • Props: label: string = "Certification", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ChannelBadge

Reusable channel badge component.

  • Mount: data-component="ChannelBadge"
  • Props: label: string = "Channel", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

CharacterCounter

Reusable character counter component.

  • Mount: data-component="CharacterCounter"
  • Props: label: string = "Character", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ChartEmptyState

Reusable chart empty state component.

  • Mount: data-component="ChartEmptyState"
  • Props: label: string = "ChartEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

CodeLanguageBadge

Reusable code language badge component.

  • Mount: data-component="CodeLanguageBadge"
  • Props: label: string = "CodeLanguage", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ComingSoonBadge

Reusable coming soon badge component.

  • Mount: data-component="ComingSoonBadge"
  • Props: label: string = "ComingSoon", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ComingSoonState

Reusable coming soon state component.

  • Mount: data-component="ComingSoonState"
  • Props: label: string = "ComingSoon", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

CookieBanner

Reusable cookie banner component.

  • Mount: data-component="CookieBanner"
  • Props: title: string = "We use cookies", description: string = "We use essential cookies and optional analytics to improve your experience.", privacyHref: string = "/privacy"
  • Slots: None
  • Events: click

Counter

Reusable counter component.

  • Mount: data-component="Counter"
  • Props: label: string = "Status", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

DeprecatedFeatureAlert

Reusable deprecated feature alert component.

  • Mount: data-component="DeprecatedFeatureAlert"
  • Props: label: string = "DeprecatedFeature", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

EmptyState

Reusable empty state component.

  • Mount: data-component="EmptyState"
  • Props: icon: string = "◇", title: string = "Nothing here yet", description: string = "", actionLabel: string = "", actionHref: string = "#"
  • Slots: None
  • Events: None

ErrorState

Reusable error state component.

  • Mount: data-component="ErrorState"
  • Props: code: string = "500", title: string = "Something went wrong", description: string = "Please try again.", actionLabel: string = "Try again", actionHref: string = "/"
  • Slots: None
  • Events: None

FeatureUnavailableState

Reusable feature unavailable state component.

  • Mount: data-component="FeatureUnavailableState"
  • Props: label: string = "FeatureUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

FileTypeBadge

Reusable file type badge component.

  • Mount: data-component="FileTypeBadge"
  • Props: label: string = "FileType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

FooterStatusIndicator

Reusable footer status indicator component.

  • Mount: data-component="FooterStatusIndicator"
  • Props: label: string = "FooterStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ForbiddenState

Reusable forbidden state component.

  • Mount: data-component="ForbiddenState"
  • Props: label: string = "Forbidden", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

FormAlert

Reusable form alert component.

  • Mount: data-component="FormAlert"
  • Props: label: string = "Form", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

GuideDifficultyBadge

Reusable guide difficulty badge component.

  • Mount: data-component="GuideDifficultyBadge"
  • Props: label: string = "GuideDifficulty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

HealthIndicator

Reusable health indicator component.

  • Mount: data-component="HealthIndicator"
  • Props: label: string = "Health", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

IncidentAlert

Reusable incident alert component.

  • Mount: data-component="IncidentAlert"
  • Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

IncidentBanner

Reusable incident banner component.

  • Mount: data-component="IncidentBanner"
  • Props: label: string = "Incident", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

IncidentSeverityBadge

Reusable incident severity badge component.

  • Mount: data-component="IncidentSeverityBadge"
  • Props: label: string = "IncidentSeverity", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

IndustryBadge

Reusable industry badge component.

  • Mount: data-component="IndustryBadge"
  • Props: label: string = "Industry", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

InlineAlert

Reusable inline alert component.

  • Mount: data-component="InlineAlert"
  • Props: label: string = "Inline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

LegalAcceptanceNotice

Reusable legal acceptance notice component.

  • Mount: data-component="LegalAcceptanceNotice"
  • Props: label: string = "LegalAcceptance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

LegalNotice

Reusable legal notice component.

  • Mount: data-component="LegalNotice"
  • Props: label: string = "Legal", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

LegalVersionBadge

Reusable legal version badge component.

  • Mount: data-component="LegalVersionBadge"
  • Props: label: string = "LegalVersion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

MaintenanceAlert

Reusable maintenance alert component.

  • Mount: data-component="MaintenanceAlert"
  • Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

MaintenanceBanner

Reusable maintenance banner component.

  • Mount: data-component="MaintenanceBanner"
  • Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

MaintenanceState

Reusable maintenance state component.

  • Mount: data-component="MaintenanceState"
  • Props: label: string = "Maintenance", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

MessageCharacterCounter

Reusable message character counter component.

  • Mount: data-component="MessageCharacterCounter"
  • Props: label: string = "MessageCharacter", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

NewBadge

Reusable new badge component.

  • Mount: data-component="NewBadge"
  • Props: label: string = "New", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

NoResultsState

Reusable no results state component.

  • Mount: data-component="NoResultsState"
  • Props: label: string = "NoResults", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

NotFoundState

Reusable not found state component.

  • Mount: data-component="NotFoundState"
  • Props: label: string = "NotFound", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

OfflineState

Reusable offline state component.

  • Mount: data-component="OfflineState"
  • Props: label: string = "Offline", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

OnlineIndicator

Reusable online indicator component.

  • Mount: data-component="OnlineIndicator"
  • Props: label: string = "Online", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

OptionalIndicator

Reusable optional indicator component.

  • Mount: data-component="OptionalIndicator"
  • Props: label: string = "Optional", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

PageAlert

Reusable page alert component.

  • Mount: data-component="PageAlert"
  • Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

PageSkeleton

Reusable page skeleton component.

  • Mount: data-component="PageSkeleton"
  • Props: label: string = "Page", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

PreviewBadge

Reusable preview badge component.

  • Mount: data-component="PreviewBadge"
  • Props: label: string = "Preview", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

PrivacyNotice

Reusable privacy notice component.

  • Mount: data-component="PrivacyNotice"
  • Props: label: string = "Privacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ProductStatusBadge

Reusable product status badge component.

  • Mount: data-component="ProductStatusBadge"
  • Props: label: string = "ProductStatus", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

RateLimitedState

Reusable rate limited state component.

  • Mount: data-component="RateLimitedState"
  • Props: label: string = "RateLimited", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

RegionalPrivacyBanner

Reusable regional privacy banner component.

  • Mount: data-component="RegionalPrivacyBanner"
  • Props: label: string = "RegionalPrivacy", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

RegionUnavailableAlert

Reusable region unavailable alert component.

  • Mount: data-component="RegionUnavailableAlert"
  • Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

RegionUnavailableState

Reusable region unavailable state component.

  • Mount: data-component="RegionUnavailableState"
  • Props: label: string = "RegionUnavailable", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

RequiredIndicator

Reusable required indicator component.

  • Mount: data-component="RequiredIndicator"
  • Props: label: string = "Required", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ResourceTypeBadge

Reusable resource type badge component.

  • Mount: data-component="ResourceTypeBadge"
  • Props: label: string = "ResourceType", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

SearchEmptyState

Reusable search empty state component.

  • Mount: data-component="SearchEmptyState"
  • Props: label: string = "SearchEmpty", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

SearchLoadingState

Reusable search loading state component.

  • Mount: data-component="SearchLoadingState"
  • Props: label: string = "SearchLoading", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

SecurityAlert

Reusable security alert component.

  • Mount: data-component="SecurityAlert"
  • Props: label: string = "Security", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

ServiceStatusBadge

Reusable service status badge component.

  • Mount: data-component="ServiceStatusBadge"
  • Props: label: string = "ServiceStatus", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Skeleton

Reusable skeleton component.

  • Mount: data-component="Skeleton"
  • Props: height: string = "4", rounded: string = "lg", className: string = ""
  • Slots: None
  • Events: None

SmsSegmentCounter

Reusable sms segment counter component.

  • Mount: data-component="SmsSegmentCounter"
  • Props: label: string = "SmsSegment", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

StatusBadge

Reusable status badge component.

  • Mount: data-component="StatusBadge"
  • Props: status: string = "operational"
  • Slots: None
  • Events: None

SuccessState

Reusable success state component.

  • Mount: data-component="SuccessState"
  • Props: label: string = "Success", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

TableSkeleton

Reusable table skeleton component.

  • Mount: data-component="TableSkeleton"
  • Props: label: string = "Table", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

TaxNotice

Reusable tax notice component.

  • Mount: data-component="TaxNotice"
  • Props: label: string = "Tax", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

TextSkeleton

Reusable text skeleton component.

  • Mount: data-component="TextSkeleton"
  • Props: label: string = "Text", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

TrendIndicator

Reusable trend indicator component.

  • Mount: data-component="TrendIndicator"
  • Props: label: string = "Trend", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

UnavailableRegionState

Reusable unavailable region state component.

  • Mount: data-component="UnavailableRegionState"
  • Props: label: string = "UnavailableRegion", title: string = "", description: string = "", value: string = "", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

VerifiedBadge

Reusable verified badge component.

  • Mount: data-component="VerifiedBadge"
  • Props: label: string = "Verified", variant: string = "default", class: string = ""
  • Slots: default
  • Events: None

Forms

AddressInput

Reusable address input component.

  • Mount: data-component="AddressInput"
  • Props: label: string = "Address", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

AmountInput

Reusable amount input component.

  • Mount: data-component="AmountInput"
  • Props: label: string = "Amount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ApartmentInput

Reusable apartment input component.

  • Mount: data-component="ApartmentInput"
  • Props: label: string = "Apartment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ApiKeyInput

Reusable api key input component.

  • Mount: data-component="ApiKeyInput"
  • Props: label: string = "ApiKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

AttachmentPicker

Reusable attachment picker component.

  • Mount: data-component="AttachmentPicker"
  • Props: label: string = "Attachment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

AuthenticatorCodeInput

Reusable authenticator code input component.

  • Mount: data-component="AuthenticatorCodeInput"
  • Props: label: string = "AuthenticatorCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

AvatarGroup

Reusable avatar group component.

  • Mount: data-component="AvatarGroup"
  • Props: label: string = "Avatar", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BillingPeriodToggle

Reusable billing period toggle component.

  • Mount: data-component="BillingPeriodToggle"
  • Props: label: string = "BillingPeriod", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BlackoutDatePicker

Reusable blackout date picker component.

  • Mount: data-component="BlackoutDatePicker"
  • Props: label: string = "BlackoutDate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BorderRadiusPicker

Reusable border radius picker component.

  • Mount: data-component="BorderRadiusPicker"
  • Props: label: string = "BorderRadius", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BrandColorPicker

Reusable brand color picker component.

  • Mount: data-component="BrandColorPicker"
  • Props: label: string = "BrandColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BrandSelector

Reusable brand selector component.

  • Mount: data-component="BrandSelector"
  • Props: label: string = "Brand", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BudgetSelector

Reusable budget selector component.

  • Mount: data-component="BudgetSelector"
  • Props: label: string = "Budget", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

BusinessHoursPicker

Reusable business hours picker component.

  • Mount: data-component="BusinessHoursPicker"
  • Props: label: string = "BusinessHours", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ButtonGroup

Reusable button group component.

  • Mount: data-component="ButtonGroup"
  • Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ButtonSelector

Reusable button selector component.

  • Mount: data-component="ButtonSelector"
  • Props: label: string = "Button", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CallbackUrlInput

Reusable callback url input component.

  • Mount: data-component="CallbackUrlInput"
  • Props: label: string = "CallbackUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CaptchaField

Reusable captcha field component.

  • Mount: data-component="CaptchaField"
  • Props: label: string = "Captcha", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CardSelector

Reusable card selector component.

  • Mount: data-component="CardSelector"
  • Props: label: string = "Card", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ChannelSelector

Reusable channel selector component.

  • Mount: data-component="ChannelSelector"
  • Props: label: string = "Channel", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CheckboxGroup

Reusable checkbox group component.

  • Mount: data-component="CheckboxGroup"
  • Props: label: string = "Checkbox", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ChipInput

Reusable chip input component.

  • Mount: data-component="ChipInput"
  • Props: label: string = "Chip", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CitySelector

Reusable city selector component.

  • Mount: data-component="CitySelector"
  • Props: label: string = "City", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CodeInput

Reusable code input component.

  • Mount: data-component="CodeInput"
  • Props: label: string = "Code", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ColorHexInput

Reusable color hex input component.

  • Mount: data-component="ColorHexInput"
  • Props: label: string = "ColorHex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ColorPicker

Reusable color picker component.

  • Mount: data-component="ColorPicker"
  • Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ColorSelector

Reusable color selector component.

  • Mount: data-component="ColorSelector"
  • Props: label: string = "Color", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CommandSearchInput

Reusable command search input component.

  • Mount: data-component="CommandSearchInput"
  • Props: label: string = "CommandSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CompanyNameInput

Reusable company name input component.

  • Mount: data-component="CompanyNameInput"
  • Props: label: string = "CompanyName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CompanySizeSelector

Reusable company size selector component.

  • Mount: data-component="CompanySizeSelector"
  • Props: label: string = "CompanySize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ComparisonDateRangePicker

Reusable comparison date range picker component.

  • Mount: data-component="ComparisonDateRangePicker"
  • Props: label: string = "ComparisonDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ConfirmPasswordInput

Reusable confirm password input component.

  • Mount: data-component="ConfirmPasswordInput"
  • Props: label: string = "ConfirmPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CookieCategoryToggle

Reusable cookie category toggle component.

  • Mount: data-component="CookieCategoryToggle"
  • Props: label: string = "CookieCategory", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CoordinatesInput

Reusable coordinates input component.

  • Mount: data-component="CoordinatesInput"
  • Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CoordinatesPicker

Reusable coordinates picker component.

  • Mount: data-component="CoordinatesPicker"
  • Props: label: string = "Coordinates", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CopySecretField

Reusable copy secret field component.

  • Mount: data-component="CopySecretField"
  • Props: label: string = "CopySecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CountryCallingCodeInput

Reusable country calling code input component.

  • Mount: data-component="CountryCallingCodeInput"
  • Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CountryCallingCodeSelector

Reusable country calling code selector component.

  • Mount: data-component="CountryCallingCodeSelector"
  • Props: label: string = "CountryCallingCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CountrySelector

Reusable country selector component.

  • Mount: data-component="CountrySelector"
  • Props: label: string = "Country", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CouponInput

Reusable coupon input component.

  • Mount: data-component="CouponInput"
  • Props: label: string = "Coupon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CreditAmountInput

Reusable credit amount input component.

  • Mount: data-component="CreditAmountInput"
  • Props: label: string = "CreditAmount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CronInput

Reusable cron input component.

  • Mount: data-component="CronInput"
  • Props: label: string = "Cron", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CurrencyInput

Reusable currency input component.

  • Mount: data-component="CurrencyInput"
  • Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CurrencySelector

Reusable currency selector component.

  • Mount: data-component="CurrencySelector"
  • Props: label: string = "Currency", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

CurrentPasswordInput

Reusable current password input component.

  • Mount: data-component="CurrentPasswordInput"
  • Props: label: string = "CurrentPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DateInput

Reusable date input component.

  • Mount: data-component="DateInput"
  • Props: id: string = "", name: string = "", label: string = "Date", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

DatePicker

Reusable date picker component.

  • Mount: data-component="DatePicker"
  • Props: id: string = "date", name: string = "date", label: string = "Date", value: string = "", min: string = "", max: string = "", required: boolean = false
  • Slots: None
  • Events: None

DateRangePicker

Reusable date range picker component.

  • Mount: data-component="DateRangePicker"
  • Props: label: string = "Date range", startName: string = "startDate", endName: string = "endDate"
  • Slots: None
  • Events: None

DateTimeInput

Reusable date time input component.

  • Mount: data-component="DateTimeInput"
  • Props: id: string = "", name: string = "", label: string = "DateTime", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

DateTimePicker

Reusable date time picker component.

  • Mount: data-component="DateTimePicker"
  • Props: id: string = "datetime-picker", name: string = "datetime", label: string = "Date and time", value: string = "", min: string = "", max: string = "", required: boolean = false, disabled: boolean = false, class: string = ""
  • Slots: None
  • Events: None

DateTimeRangePicker

Reusable date time range picker component.

  • Mount: data-component="DateTimeRangePicker"
  • Props: label: string = "DateTimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DecimalInput

Reusable decimal input component.

  • Mount: data-component="DecimalInput"
  • Props: label: string = "Decimal", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DepartmentInput

Reusable department input component.

  • Mount: data-component="DepartmentInput"
  • Props: label: string = "Department", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DiscountInput

Reusable discount input component.

  • Mount: data-component="DiscountInput"
  • Props: label: string = "Discount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DisplayNameInput

Reusable display name input component.

  • Mount: data-component="DisplayNameInput"
  • Props: label: string = "DisplayName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DomainInput

Reusable domain input component.

  • Mount: data-component="DomainInput"
  • Props: label: string = "Domain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DurationInput

Reusable duration input component.

  • Mount: data-component="DurationInput"
  • Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

DurationPicker

Reusable duration picker component.

  • Mount: data-component="DurationPicker"
  • Props: label: string = "Duration", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

EmailBodyEditor

Reusable email body editor component.

  • Mount: data-component="EmailBodyEditor"
  • Props: label: string = "EmailBody", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

EmailInput

Reusable email input component.

  • Mount: data-component="EmailInput"
  • Props: id: string = "", name: string = "", label: string = "Email", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

EmojiPicker

Reusable emoji picker component.

  • Mount: data-component="EmojiPicker"
  • Props: label: string = "Emoji", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

EnvironmentSelector

Reusable environment selector component.

  • Mount: data-component="EnvironmentSelector"
  • Props: label: string = "Environment", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ExpiryDateTimePicker

Reusable expiry date time picker component.

  • Mount: data-component="ExpiryDateTimePicker"
  • Props: label: string = "ExpiryDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FaxInput

Reusable fax input component.

  • Mount: data-component="FaxInput"
  • Props: label: string = "Fax", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FileInput

Reusable file input component.

  • Mount: data-component="FileInput"
  • Props: label: string = "File", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FileSizeInput

Reusable file size input component.

  • Mount: data-component="FileSizeInput"
  • Props: label: string = "FileSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FilterSearchInput

Reusable filter search input component.

  • Mount: data-component="FilterSearchInput"
  • Props: label: string = "FilterSearch", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FirstNameInput

Reusable first name input component.

  • Mount: data-component="FirstNameInput"
  • Props: label: string = "FirstName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FontPicker

Reusable font picker component.

  • Mount: data-component="FontPicker"
  • Props: label: string = "Font", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FontSizePicker

Reusable font size picker component.

  • Mount: data-component="FontSizePicker"
  • Props: label: string = "FontSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FontWeightPicker

Reusable font weight picker component.

  • Mount: data-component="FontWeightPicker"
  • Props: label: string = "FontWeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

FormField

Reusable form field component.

  • Mount: data-component="FormField"
  • Props: label: string = "Field", help: string = "", error: string = "", required: boolean = false
  • Slots: default
  • Events: None

FormGroup

Reusable form group component.

  • Mount: data-component="FormGroup"
  • Props: label: string = "Form", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

GeofenceEditor

Reusable geofence editor component.

  • Mount: data-component="GeofenceEditor"
  • Props: label: string = "Geofence", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

GradientPicker

Reusable gradient picker component.

  • Mount: data-component="GradientPicker"
  • Props: label: string = "Gradient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

GradientStopEditor

Reusable gradient stop editor component.

  • Mount: data-component="GradientStopEditor"
  • Props: label: string = "GradientStop", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HexColorInput

Reusable hex color input component.

  • Mount: data-component="HexColorInput"
  • Props: label: string = "HexColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HiddenField

Reusable hidden field component.

  • Mount: data-component="HiddenField"
  • Props: label: string = "Hidden", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HostnameInput

Reusable hostname input component.

  • Mount: data-component="HostnameInput"
  • Props: label: string = "Hostname", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HourPicker

Reusable hour picker component.

  • Mount: data-component="HourPicker"
  • Props: label: string = "Hour", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HslColorInput

Reusable hsl color input component.

  • Mount: data-component="HslColorInput"
  • Props: label: string = "HslColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

HtmlEditor

Reusable html editor component.

  • Mount: data-component="HtmlEditor"
  • Props: label: string = "Html", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IconPicker

Reusable icon picker component.

  • Mount: data-component="IconPicker"
  • Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IconSelector

Reusable icon selector component.

  • Mount: data-component="IconSelector"
  • Props: label: string = "Icon", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IdentifierInput

Reusable identifier input component.

  • Mount: data-component="IdentifierInput"
  • Props: label: string = "Identifier", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ImageEditor

Reusable image editor component.

  • Mount: data-component="ImageEditor"
  • Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ImageSelector

Reusable image selector component.

  • Mount: data-component="ImageSelector"
  • Props: label: string = "Image", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IndustrySelector

Reusable industry selector component.

  • Mount: data-component="IndustrySelector"
  • Props: label: string = "Industry", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

InputGroup

Reusable input group component.

  • Mount: data-component="InputGroup"
  • Props: label: string = "Input", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IntegerInput

Reusable integer input component.

  • Mount: data-component="IntegerInput"
  • Props: label: string = "Integer", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

IpAddressInput

Reusable ip address input component.

  • Mount: data-component="IpAddressInput"
  • Props: label: string = "IpAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

JobTitleInput

Reusable job title input component.

  • Mount: data-component="JobTitleInput"
  • Props: label: string = "JobTitle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

JsonInput

Reusable json input component.

  • Mount: data-component="JsonInput"
  • Props: label: string = "Json", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LanguageSelector

Reusable language selector component.

  • Mount: data-component="LanguageSelector"
  • Props: label: string = "Language", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LastNameInput

Reusable last name input component.

  • Mount: data-component="LastNameInput"
  • Props: label: string = "LastName", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LatitudeInput

Reusable latitude input component.

  • Mount: data-component="LatitudeInput"
  • Props: label: string = "Latitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LegalLanguageSelector

Reusable legal language selector component.

  • Mount: data-component="LegalLanguageSelector"
  • Props: label: string = "LegalLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LegalRegionSelector

Reusable legal region selector component.

  • Mount: data-component="LegalRegionSelector"
  • Props: label: string = "LegalRegion", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LetterSpacingPicker

Reusable letter spacing picker component.

  • Mount: data-component="LetterSpacingPicker"
  • Props: label: string = "LetterSpacing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LicenseKeyInput

Reusable license key input component.

  • Mount: data-component="LicenseKeyInput"
  • Props: label: string = "LicenseKey", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LineHeightPicker

Reusable line height picker component.

  • Mount: data-component="LineHeightPicker"
  • Props: label: string = "LineHeight", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LocaleSelector

Reusable locale selector component.

  • Mount: data-component="LocaleSelector"
  • Props: label: string = "Locale", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LocationPicker

Reusable location picker component.

  • Mount: data-component="LocationPicker"
  • Props: label: string = "Location", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

LongitudeInput

Reusable longitude input component.

  • Mount: data-component="LongitudeInput"
  • Props: label: string = "Longitude", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MaintenanceWindowPicker

Reusable maintenance window picker component.

  • Mount: data-component="MaintenanceWindowPicker"
  • Props: label: string = "MaintenanceWindow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MapPicker

Reusable map picker component.

  • Mount: data-component="MapPicker"
  • Props: label: string = "Map", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MarkdownEditor

Reusable markdown editor component.

  • Mount: data-component="MarkdownEditor"
  • Props: label: string = "Markdown", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MaskedSecretField

Reusable masked secret field component.

  • Mount: data-component="MaskedSecretField"
  • Props: label: string = "MaskedSecret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MentionInput

Reusable mention input component.

  • Mount: data-component="MentionInput"
  • Props: label: string = "Mention", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MessageLimitInput

Reusable message limit input component.

  • Mount: data-component="MessageLimitInput"
  • Props: label: string = "MessageLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MinutePicker

Reusable minute picker component.

  • Mount: data-component="MinutePicker"
  • Props: label: string = "Minute", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MobileInput

Reusable mobile input component.

  • Mount: data-component="MobileInput"
  • Props: label: string = "Mobile", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MonthlyVolumeSelector

Reusable monthly volume selector component.

  • Mount: data-component="MonthlyVolumeSelector"
  • Props: label: string = "MonthlyVolume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MonthPicker

Reusable month picker component.

  • Mount: data-component="MonthPicker"
  • Props: label: string = "Month", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MonthYearPicker

Reusable month year picker component.

  • Mount: data-component="MonthYearPicker"
  • Props: label: string = "MonthYear", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

MultipleEmailInput

Reusable multiple email input component.

  • Mount: data-component="MultipleEmailInput"
  • Props: label: string = "MultipleEmail", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

NameInput

Reusable name input component.

  • Mount: data-component="NameInput"
  • Props: label: string = "Name", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

NewPasswordInput

Reusable new password input component.

  • Mount: data-component="NewPasswordInput"
  • Props: label: string = "NewPassword", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

NumberInput

Reusable number input component.

  • Mount: data-component="NumberInput"
  • Props: id: string = "", name: string = "", label: string = "Number", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

OrganizationSelector

Reusable organization selector component.

  • Mount: data-component="OrganizationSelector"
  • Props: label: string = "Organization", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

OtpInput

Reusable otp input component.

  • Mount: data-component="OtpInput"
  • Props: name: string = "otp", length: number = 6, label: string = "Verification code"
  • Slots: None
  • Events: None

PasswordInput

Reusable password input component.

  • Mount: data-component="PasswordInput"
  • Props: id: string = "", name: string = "", label: string = "Password", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

PasswordVisibilityToggle

Reusable password visibility toggle component.

  • Mount: data-component="PasswordVisibilityToggle"
  • Props: label: string = "PasswordVisibility", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PathInput

Reusable path input component.

  • Mount: data-component="PathInput"
  • Props: label: string = "Path", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PercentageInput

Reusable percentage input component.

  • Mount: data-component="PercentageInput"
  • Props: label: string = "Percentage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PermissionSelector

Reusable permission selector component.

  • Mount: data-component="PermissionSelector"
  • Props: label: string = "Permission", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PhoneInput

Reusable phone input component.

  • Mount: data-component="PhoneInput"
  • Props: id: string = "", name: string = "", label: string = "Phone", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

PinInput

Reusable pin input component.

  • Mount: data-component="PinInput"
  • Props: label: string = "Pin", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PlainTextEditor

Reusable plain text editor component.

  • Mount: data-component="PlainTextEditor"
  • Props: label: string = "PlainText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PlanSelector

Reusable plan selector component.

  • Mount: data-component="PlanSelector"
  • Props: label: string = "Plan", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PortInput

Reusable port input component.

  • Mount: data-component="PortInput"
  • Props: label: string = "Port", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PortNumberInput

Reusable port number input component.

  • Mount: data-component="PortNumberInput"
  • Props: label: string = "PortNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PositiveNumberInput

Reusable positive number input component.

  • Mount: data-component="PositiveNumberInput"
  • Props: label: string = "PositiveNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PostalCodeInput

Reusable postal code input component.

  • Mount: data-component="PostalCodeInput"
  • Props: label: string = "PostalCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PresetDateRangePicker

Reusable preset date range picker component.

  • Mount: data-component="PresetDateRangePicker"
  • Props: label: string = "PresetDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PriceInput

Reusable price input component.

  • Mount: data-component="PriceInput"
  • Props: label: string = "Price", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PricingFeatureGroup

Reusable pricing feature group component.

  • Mount: data-component="PricingFeatureGroup"
  • Props: label: string = "PricingFeature", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PricingToggle

Reusable pricing toggle component.

  • Mount: data-component="PricingToggle"
  • Props: label: string = "Pricing", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PrioritySelector

Reusable priority selector component.

  • Mount: data-component="PrioritySelector"
  • Props: label: string = "Priority", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ProductSelector

Reusable product selector component.

  • Mount: data-component="ProductSelector"
  • Props: label: string = "Product", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ProjectSelector

Reusable project selector component.

  • Mount: data-component="ProjectSelector"
  • Props: label: string = "Project", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PromoCodeInput

Reusable promo code input component.

  • Mount: data-component="PromoCodeInput"
  • Props: label: string = "PromoCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ProviderSelector

Reusable provider selector component.

  • Mount: data-component="ProviderSelector"
  • Props: label: string = "Provider", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PublishDateTimePicker

Reusable publish date time picker component.

  • Mount: data-component="PublishDateTimePicker"
  • Props: label: string = "PublishDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

PushNotificationEditor

Reusable push notification editor component.

  • Mount: data-component="PushNotificationEditor"
  • Props: label: string = "PushNotification", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

QuantityInput

Reusable quantity input component.

  • Mount: data-component="QuantityInput"
  • Props: label: string = "Quantity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

QuietHoursPicker

Reusable quiet hours picker component.

  • Mount: data-component="QuietHoursPicker"
  • Props: label: string = "Quiet hours", startName: string = "quietStart", endName: string = "quietEnd", start: string = "22:00", end: string = "08:00", timezone: string = "UTC", disabled: boolean = false, class: string = ""
  • Slots: None
  • Events: None

RadioGroup

Reusable radio group component.

  • Mount: data-component="RadioGroup"
  • Props: label: string = "Choose one", name: string = "choice"
  • Slots: default
  • Events: None

RangeInput

Reusable range input component.

  • Mount: data-component="RangeInput"
  • Props: label: string = "Range", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RateLimitInput

Reusable rate limit input component.

  • Mount: data-component="RateLimitInput"
  • Props: label: string = "RateLimit", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RecipientSelector

Reusable recipient selector component.

  • Mount: data-component="RecipientSelector"
  • Props: label: string = "Recipient", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RecoveryCodeInput

Reusable recovery code input component.

  • Mount: data-component="RecoveryCodeInput"
  • Props: label: string = "RecoveryCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RecurringSchedulePicker

Reusable recurring schedule picker component.

  • Mount: data-component="RecurringSchedulePicker"
  • Props: id: string = "recurring-schedule", name: string = "recurrence", label: string = "Repeat", value: string = "none", disabled: boolean = false, class: string = ""
  • Slots: None
  • Events: None

RedirectUriInput

Reusable redirect uri input component.

  • Mount: data-component="RedirectUriInput"
  • Props: label: string = "RedirectUri", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ReferenceInput

Reusable reference input component.

  • Mount: data-component="ReferenceInput"
  • Props: label: string = "Reference", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RegexInput

Reusable regex input component.

  • Mount: data-component="RegexInput"
  • Props: label: string = "Regex", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RegionSelector

Reusable region selector component.

  • Mount: data-component="RegionSelector"
  • Props: label: string = "Region", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RetryCountInput

Reusable retry count input component.

  • Mount: data-component="RetryCountInput"
  • Props: label: string = "RetryCount", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RgbColorInput

Reusable rgb color input component.

  • Mount: data-component="RgbColorInput"
  • Props: label: string = "RgbColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RichTextEditor

Reusable rich text editor component.

  • Mount: data-component="RichTextEditor"
  • Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RichTextInput

Reusable rich text input component.

  • Mount: data-component="RichTextInput"
  • Props: label: string = "RichText", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RoleSelector

Reusable role selector component.

  • Mount: data-component="RoleSelector"
  • Props: label: string = "Role", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

RollingDateRangePicker

Reusable rolling date range picker component.

  • Mount: data-component="RollingDateRangePicker"
  • Props: label: string = "RollingDateRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SavedFilterSelector

Reusable saved filter selector component.

  • Mount: data-component="SavedFilterSelector"
  • Props: label: string = "SavedFilter", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ScheduledDateTimePicker

Reusable scheduled date time picker component.

  • Mount: data-component="ScheduledDateTimePicker"
  • Props: label: string = "ScheduledDateTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ScheduleMessagePicker

Reusable schedule message picker component.

  • Mount: data-component="ScheduleMessagePicker"
  • Props: label: string = "ScheduleMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SchedulePicker

Reusable schedule picker component.

  • Mount: data-component="SchedulePicker"
  • Props: label: string = "Schedule"
  • Slots: None
  • Events: None

SdkLanguageSelector

Reusable sdk language selector component.

  • Mount: data-component="SdkLanguageSelector"
  • Props: label: string = "SdkLanguage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SearchInput

Reusable search input component.

  • Mount: data-component="SearchInput"
  • Props: id: string = "", name: string = "", label: string = "Search", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

SecondPicker

Reusable second picker component.

  • Mount: data-component="SecondPicker"
  • Props: label: string = "Second", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SecretInput

Reusable secret input component.

  • Mount: data-component="SecretInput"
  • Props: label: string = "Secret", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SenderIdInput

Reusable sender id input component.

  • Mount: data-component="SenderIdInput"
  • Props: label: string = "SenderId", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SeveritySelector

Reusable severity selector component.

  • Mount: data-component="SeveritySelector"
  • Props: label: string = "Severity", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ShadowPicker

Reusable shadow picker component.

  • Mount: data-component="ShadowPicker"
  • Props: label: string = "Shadow", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SlugInput

Reusable slug input component.

  • Mount: data-component="SlugInput"
  • Props: label: string = "Slug", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SmsMessageEditor

Reusable sms message editor component.

  • Mount: data-component="SmsMessageEditor"
  • Props: label: string = "SmsMessage", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

StateSelector

Reusable state selector component.

  • Mount: data-component="StateSelector"
  • Props: label: string = "State", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

StatusSelector

Reusable status selector component.

  • Mount: data-component="StatusSelector"
  • Props: label: string = "Status", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

StepperInput

Reusable stepper input component.

  • Mount: data-component="StepperInput"
  • Props: label: string = "Stepper", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

StickerPicker

Reusable sticker picker component.

  • Mount: data-component="StickerPicker"
  • Props: label: string = "Sticker", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

StreetAddressInput

Reusable street address input component.

  • Mount: data-component="StreetAddressInput"
  • Props: label: string = "StreetAddress", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SubdomainInput

Reusable subdomain input component.

  • Mount: data-component="SubdomainInput"
  • Props: label: string = "Subdomain", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

SubjectInput

Reusable subject input component.

  • Mount: data-component="SubjectInput"
  • Props: label: string = "Subject", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TagInput

Reusable tag input component.

  • Mount: data-component="TagInput"
  • Props: label: string = "Tag", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TaxRateInput

Reusable tax rate input component.

  • Mount: data-component="TaxRateInput"
  • Props: label: string = "TaxRate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TeamSizeSelector

Reusable team size selector component.

  • Mount: data-component="TeamSizeSelector"
  • Props: label: string = "TeamSize", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TemplateSelector

Reusable template selector component.

  • Mount: data-component="TemplateSelector"
  • Props: label: string = "Template", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TemplateVariableInput

Reusable template variable input component.

  • Mount: data-component="TemplateVariableInput"
  • Props: label: string = "TemplateVariable", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TextInput

Reusable text input component.

  • Mount: data-component="TextInput"
  • Props: id: string = "", name: string = "", label: string = "Text", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

ThemeColorPicker

Reusable theme color picker component.

  • Mount: data-component="ThemeColorPicker"
  • Props: label: string = "ThemeColor", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TimeInput

Reusable time input component.

  • Mount: data-component="TimeInput"
  • Props: id: string = "", name: string = "", label: string = "Time", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

TimeoutInput

Reusable timeout input component.

  • Mount: data-component="TimeoutInput"
  • Props: label: string = "Timeout", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TimePicker

Reusable time picker component.

  • Mount: data-component="TimePicker"
  • Props: id: string = "time-picker", name: string = "time", label: string = "Time", value: string = "", min: string = "", max: string = "", step: number = 60, required: boolean = false, disabled: boolean = false, class: string = ""
  • Slots: None
  • Events: None

TimeRangePicker

Reusable time range picker component.

  • Mount: data-component="TimeRangePicker"
  • Props: label: string = "TimeRange", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TimezoneAwareTimePicker

Reusable timezone aware time picker component.

  • Mount: data-component="TimezoneAwareTimePicker"
  • Props: label: string = "TimezoneAwareTime", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TimezoneSelector

Reusable timezone selector component.

  • Mount: data-component="TimezoneSelector"
  • Props: id: string = "timezone", name: string = "timezone", label: string = "Timezone"
  • Slots: None
  • Events: None

Toggle

Reusable toggle component.

  • Mount: data-component="Toggle"
  • Props: label: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

ToggleGroup

Reusable toggle group component.

  • Mount: data-component="ToggleGroup"
  • Props: label: string = "Toggle", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

TokenInput

Reusable token input component.

  • Mount: data-component="TokenInput"
  • Props: label: string = "Token", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

UrlInput

Reusable url input component.

  • Mount: data-component="UrlInput"
  • Props: id: string = "", name: string = "", label: string = "Url", value: string = "", placeholder: string = "", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = ""
  • Slots: None
  • Events: None

UseCaseSelector

Reusable use case selector component.

  • Mount: data-component="UseCaseSelector"
  • Props: label: string = "UseCase", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

UsernameInput

Reusable username input component.

  • Mount: data-component="UsernameInput"
  • Props: label: string = "Username", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

VerificationCodeInput

Reusable verification code input component.

  • Mount: data-component="VerificationCodeInput"
  • Props: label: string = "VerificationCode", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

VersionSelector

Reusable version selector component.

  • Mount: data-component="VersionSelector"
  • Props: label: string = "Version", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

VoiceScriptEditor

Reusable voice script editor component.

  • Mount: data-component="VoiceScriptEditor"
  • Props: label: string = "VoiceScript", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

VolumeInput

Reusable volume input component.

  • Mount: data-component="VolumeInput"
  • Props: label: string = "Volume", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

WebhookUrlInput

Reusable webhook url input component.

  • Mount: data-component="WebhookUrlInput"
  • Props: label: string = "WebhookUrl", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

WhatsAppNumberInput

Reusable whats app number input component.

  • Mount: data-component="WhatsAppNumberInput"
  • Props: label: string = "WhatsAppNumber", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

WhatsAppTemplateEditor

Reusable whats app template editor component.

  • Mount: data-component="WhatsAppTemplateEditor"
  • Props: label: string = "WhatsAppTemplate", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

WorkspaceSelector

Reusable workspace selector component.

  • Mount: data-component="WorkspaceSelector"
  • Props: label: string = "Workspace", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

YearPicker

Reusable year picker component.

  • Mount: data-component="YearPicker"
  • Props: label: string = "Year", name: string = "", value: string = "", placeholder: string = "", type: string = "text", required: boolean = false, disabled: boolean = false, readonly: boolean = false, help: string = "", error: string = "", class: string = ""
  • Slots: default
  • Events: None

Layout

AnchorNavigation

Reusable anchor navigation component.

  • Mount: data-component="AnchorNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

AppHeader

Reusable app header component.

  • Mount: data-component="AppHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ArchitectureSection

Reusable architecture section component.

  • Mount: data-component="ArchitectureSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ArticleHero

Reusable article hero component.

  • Mount: data-component="ArticleHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ArticleLayout

Reusable article layout component.

  • Mount: data-component="ArticleLayout"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ArticlePageShell

Reusable article page shell component.

  • Mount: data-component="ArticlePageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

BottomNavigation

Reusable bottom navigation component.

  • Mount: data-component="BottomNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

BrowserFrame

Reusable browser frame component.

  • Mount: data-component="BrowserFrame"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CalendarHeader

Reusable calendar header component.

  • Mount: data-component="CalendarHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CalendarNavigation

Reusable calendar navigation component.

  • Mount: data-component="CalendarNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CaseStudyHero

Reusable case study hero component.

  • Mount: data-component="CaseStudyHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CenteredHero

Reusable centered hero component.

  • Mount: data-component="CenteredHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CenteredSectionHeader

Reusable centered section header component.

  • Mount: data-component="CenteredSectionHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ChallengeSection

Reusable challenge section component.

  • Mount: data-component="ChallengeSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CodeHeader

Reusable code header component.

  • Mount: data-component="CodeHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CompanyHero

Reusable company hero component.

  • Mount: data-component="CompanyHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CompanyPageShell

Reusable company page shell component.

  • Mount: data-component="CompanyPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ContactHero

Reusable contact hero component.

  • Mount: data-component="ContactHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ContactPageShell

Reusable contact page shell component.

  • Mount: data-component="ContactPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

CTASection

Reusable c t a section component.

  • Mount: data-component="CTASection"
  • Props: eyebrow: string = "Ready?", title: string = "Start building today", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Contact sales", secondaryHref: string = "#"
  • Slots: None
  • Events: None

DesktopNavigation

Reusable desktop navigation component.

  • Mount: data-component="DesktopNavigation"
  • Props: label: string = "Primary navigation", items: string = [], class: string = ""
  • Slots: None
  • Events: None

DeveloperHero

Reusable developer hero component.

  • Mount: data-component="DeveloperHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

DeveloperPageShell

Reusable developer page shell component.

  • Mount: data-component="DeveloperPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

DropdownNavigation

Reusable dropdown navigation component.

  • Mount: data-component="DropdownNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

EnterpriseHero

Reusable enterprise hero component.

  • Mount: data-component="EnterpriseHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ErrorHero

Reusable error hero component.

  • Mount: data-component="ErrorHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ErrorPageShell

Reusable error page shell component.

  • Mount: data-component="ErrorPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

FeatureDetailsPanel

Reusable feature details panel component.

  • Mount: data-component="FeatureDetailsPanel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

FormSection

Reusable form section component.

  • Mount: data-component="FormSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Header

Reusable header component.

  • Mount: data-component="Header"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Hero

Reusable hero component.

  • Mount: data-component="Hero"
  • Props: eyebrow: string = "", title: string = "Build faster with WRNexusJS", highlight: string = "", description: string = "", primaryLabel: string = "Get started", primaryHref: string = "#", secondaryLabel: string = "Learn more", secondaryHref: string = "#", align: string = "center"
  • Slots: default
  • Events: None

HeroCodePanel

Reusable hero code panel component.

  • Mount: data-component="HeroCodePanel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

InsetPanel

Reusable inset panel component.

  • Mount: data-component="InsetPanel"
  • Props: class: string = ""
  • Slots: default
  • Events: None

LegalDocumentHeader

Reusable legal document header component.

  • Mount: data-component="LegalDocumentHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

LegalDocumentLayout

Reusable legal document layout component.

  • Mount: data-component="LegalDocumentLayout"
  • Props: title: string = "Legal document", effectiveDate: string = "", updatedDate: string = ""
  • Slots: toc, default
  • Events: None

LegalHero

Reusable legal hero component.

  • Mount: data-component="LegalHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

LegalPageShell

Reusable legal page shell component.

  • Mount: data-component="LegalPageShell"
  • Props: class: string = ""
  • Slots: navigation, default
  • Events: None

LegalSection

Reusable legal section component.

  • Mount: data-component="LegalSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

MarketingPageShell

Reusable marketing page shell component.

  • Mount: data-component="MarketingPageShell"
  • Props: class: string = ""
  • Slots: default
  • Events: None

MarketingSectionHeader

Reusable marketing section header component.

  • Mount: data-component="MarketingSectionHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

MissionSection

Reusable mission section component.

  • Mount: data-component="MissionSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

MobileDeviceFrame

Reusable mobile device frame component.

  • Mount: data-component="MobileDeviceFrame"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

MobileNavigation

Reusable mobile navigation component.

  • Mount: data-component="MobileNavigation"
  • Props: label: string = "Menu", closeLabel: string = "Close menu", items: string = [], class: string = ""
  • Slots: None
  • Events: click

Navigation

Reusable navigation component.

  • Mount: data-component="Navigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Panel

Reusable panel component.

  • Mount: data-component="Panel"
  • Props: class: string = ""
  • Slots: default
  • Events: None

PreviousNextNavigation

Reusable previous next navigation component.

  • Mount: data-component="PreviousNextNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

PricingHero

Reusable pricing hero component.

  • Mount: data-component="PricingHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ProductCategorySection

Reusable product category section component.

  • Mount: data-component="ProductCategorySection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ProductHero

Reusable product hero component.

  • Mount: data-component="ProductHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ProductPageShell

Reusable product page shell component.

  • Mount: data-component="ProductPageShell"
  • Props: class: string = ""
  • Slots: default
  • Events: None

PublicHeader

Reusable public header component.

  • Mount: data-component="PublicHeader"
  • Props: brand: string = "WRNexusJS", homeHref: string = "/", signInHref: string = "/signin", ctaHref: string = "/start", ctaLabel: string = "Get started"
  • Slots: default, mobile
  • Events: click

PublicPageShell

Reusable public page shell component.

  • Mount: data-component="PublicPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ResizablePanel

Reusable resizable panel component.

  • Mount: data-component="ResizablePanel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ResourcePageShell

Reusable resource page shell component.

  • Mount: data-component="ResourcePageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ResultsSection

Reusable results section component.

  • Mount: data-component="ResultsSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

ScreenshotFrame

Reusable screenshot frame component.

  • Mount: data-component="ScreenshotFrame"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Section

Reusable section component.

  • Mount: data-component="Section"
  • Props: id: string = "", size: string = "default", surface: string = "default", className: string = ""
  • Slots: default
  • Events: None

SectionHeader

Reusable section header component.

  • Mount: data-component="SectionHeader"
  • Props: eyebrow: string = "", title: string = "Section title", description: string = "", align: string = "left"
  • Slots: default
  • Events: None

SecurityHero

Reusable security hero component.

  • Mount: data-component="SecurityHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SidebarLayout

Reusable sidebar layout component.

  • Mount: data-component="SidebarLayout"
  • Props: class: string = ""
  • Slots: default
  • Events: None

SidePanel

Reusable side panel component.

  • Mount: data-component="SidePanel"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SolutionHero

Reusable solution hero component.

  • Mount: data-component="SolutionHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SolutionPageShell

Reusable solution page shell component.

  • Mount: data-component="SolutionPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SolutionSection

Reusable solution section component.

  • Mount: data-component="SolutionSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SplitHero

Reusable split hero component.

  • Mount: data-component="SplitHero"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

SplitLayout

Reusable split layout component.

  • Mount: data-component="SplitLayout"
  • Props: class: string = ""
  • Slots: default
  • Events: None

SplitSectionHeader

Reusable split section header component.

  • Mount: data-component="SplitSectionHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

StatusPageShell

Reusable status page shell component.

  • Mount: data-component="StatusPageShell"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

StepNavigation

Reusable step navigation component.

  • Mount: data-component="StepNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

StickyLayout

Reusable sticky layout component.

  • Mount: data-component="StickyLayout"
  • Props: class: string = ""
  • Slots: default
  • Events: None

TableHeader

Reusable table header component.

  • Mount: data-component="TableHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

VisionSection

Reusable vision section component.

  • Mount: data-component="VisionSection"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

WizardHeader

Reusable wizard header component.

  • Mount: data-component="WizardHeader"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

WizardNavigation

Reusable wizard navigation component.

  • Mount: data-component="WizardNavigation"
  • Props: eyebrow: string = "", title: string = "", description: string = "", align: string = "start", class: string = ""
  • Slots: default
  • Events: None

Overlays

AccessibleDialog

Reusable accessible dialog component.

  • Mount: data-component="AccessibleDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

AccessibleMenu

Reusable accessible menu component.

  • Mount: data-component="AccessibleMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

AccountMenu

Reusable account menu component.

  • Mount: data-component="AccountMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ActionMenu

Reusable action menu component.

  • Mount: data-component="ActionMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

AlertDialog

Reusable alert dialog component.

  • Mount: data-component="AlertDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ApiKeyCreateDialog

Reusable api key create dialog component.

  • Mount: data-component="ApiKeyCreateDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

CommandMenu

Reusable command menu component.

  • Mount: data-component="CommandMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ConfirmationDialog

Reusable confirmation dialog component.

  • Mount: data-component="ConfirmationDialog"
  • Props: title: string = "Confirm action", description: string = "Are you sure you want to continue?", confirmLabel: string = "Confirm", cancelLabel: string = "Cancel", danger: boolean = false, open: boolean = false, class: string = ""
  • Slots: confirm
  • Events: click

ContextMenu

Reusable context menu component.

  • Mount: data-component="ContextMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

CookiePreferencesDialog

Reusable cookie preferences dialog component.

  • Mount: data-component="CookiePreferencesDialog"
  • Props: title: string = "Cookie preferences", description: string = "Choose which optional cookies you allow. Essential cookies are always enabled.", saveLabel: string = "Save preferences", acceptLabel: string = "Accept all", rejectLabel: string = "Reject optional", open: boolean = false, class: string = ""
  • Slots: None
  • Events: change, click

DeleteConfirmationDialog

Reusable delete confirmation dialog component.

  • Mount: data-component="DeleteConfirmationDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

DevelopersMenu

Reusable developers menu component.

  • Mount: data-component="DevelopersMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

DropdownMenu

Reusable dropdown menu component.

  • Mount: data-component="DropdownMenu"
  • Props: label: string = "Menu"
  • Slots: default
  • Events: click

FilterMenu

Reusable filter menu component.

  • Mount: data-component="FilterMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

FormDialog

Reusable form dialog component.

  • Mount: data-component="FormDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

FullscreenDialog

Reusable fullscreen dialog component.

  • Mount: data-component="FullscreenDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ImagePreviewDialog

Reusable image preview dialog component.

  • Mount: data-component="ImagePreviewDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

Lightbox

Reusable lightbox component.

  • Mount: data-component="Lightbox"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

LogoutDialog

Reusable logout dialog component.

  • Mount: data-component="LogoutDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

MegaMenu

Reusable mega menu component.

  • Mount: data-component="MegaMenu"
  • Props: label: string = "Explore", sections: string = [], class: string = ""
  • Slots: None
  • Events: click

NavigationMegaMenu

Reusable navigation mega menu component.

  • Mount: data-component="NavigationMegaMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

Popover

Reusable popover component.

  • Mount: data-component="Popover"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ProductsMegaMenu

Reusable products mega menu component.

  • Mount: data-component="ProductsMegaMenu"
  • Props: label: string = "Products", sections: string = [], class: string = ""
  • Slots: None
  • Events: None

PromptDialog

Reusable prompt dialog component.

  • Mount: data-component="PromptDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

ResourcesMegaMenu

Reusable resources mega menu component.

  • Mount: data-component="ResourcesMegaMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

SearchDialog

Reusable search dialog component.

  • Mount: data-component="SearchDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

SecretRevealDialog

Reusable secret reveal dialog component.

  • Mount: data-component="SecretRevealDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

SessionExpiredDialog

Reusable session expired dialog component.

  • Mount: data-component="SessionExpiredDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

SolutionsMegaMenu

Reusable solutions mega menu component.

  • Mount: data-component="SolutionsMegaMenu"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

StepUpAuthenticationDialog

Reusable step up authentication dialog component.

  • Mount: data-component="StepUpAuthenticationDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

TestMessageDialog

Reusable test message dialog component.

  • Mount: data-component="TestMessageDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

UnsavedChangesDialog

Reusable unsaved changes dialog component.

  • Mount: data-component="UnsavedChangesDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

VideoPreviewDialog

Reusable video preview dialog component.

  • Mount: data-component="VideoPreviewDialog"
  • Props: title: string = "", description: string = "", open: boolean = false, closeLabel: string = "Close", class: string = ""
  • Slots: default
  • Events: None

Visualization

AreaChart

Reusable area chart component.

  • Mount: data-component="AreaChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

BarChart

Reusable bar chart component.

  • Mount: data-component="BarChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CampaignProgress

Reusable campaign progress component.

  • Mount: data-component="CampaignProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ChannelComparisonChart

Reusable channel comparison chart component.

  • Mount: data-component="ChannelComparisonChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ChannelFallbackDiagram

Reusable channel fallback diagram component.

  • Mount: data-component="ChannelFallbackDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ChannelFlow

Reusable channel flow component.

  • Mount: data-component="ChannelFlow"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ChecklistProgress

Reusable checklist progress component.

  • Mount: data-component="ChecklistProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CircularProgress

Reusable circular progress component.

  • Mount: data-component="CircularProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CohortChart

Reusable cohort chart component.

  • Mount: data-component="CohortChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CompletionMeter

Reusable completion meter component.

  • Mount: data-component="CompletionMeter"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ConversionChart

Reusable conversion chart component.

  • Mount: data-component="ConversionChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

CostBreakdownChart

Reusable cost breakdown chart component.

  • Mount: data-component="CostBreakdownChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DeliveryStatusChart

Reusable delivery status chart component.

  • Mount: data-component="DeliveryStatusChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DeliveryStatusTimeline

Reusable delivery status timeline component.

  • Mount: data-component="DeliveryStatusTimeline"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

DonutChart

Reusable donut chart component.

  • Mount: data-component="DonutChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

EncryptionDiagram

Reusable encryption diagram component.

  • Mount: data-component="EncryptionDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ExportProgress

Reusable export progress component.

  • Mount: data-component="ExportProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FallbackRouteDiagram

Reusable fallback route diagram component.

  • Mount: data-component="FallbackRouteDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FeatureTimeline

Reusable feature timeline component.

  • Mount: data-component="FeatureTimeline"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FormProgress

Reusable form progress component.

  • Mount: data-component="FormProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

FunnelChart

Reusable funnel chart component.

  • Mount: data-component="FunnelChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

GeoChart

Reusable geo chart component.

  • Mount: data-component="GeoChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ImportProgress

Reusable import progress component.

  • Mount: data-component="ImportProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

IncidentResponseFlow

Reusable incident response flow component.

  • Mount: data-component="IncidentResponseFlow"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

IncidentTimeline

Reusable incident timeline component.

  • Mount: data-component="IncidentTimeline"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

JobProgress

Reusable job progress component.

  • Mount: data-component="JobProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

LatencyMetric

Reusable latency metric component.

  • Mount: data-component="LatencyMetric"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

LineChart

Reusable line chart component.

  • Mount: data-component="LineChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Metric

Reusable metric component.

  • Mount: data-component="Metric"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

OnboardingProgress

Reusable onboarding progress component.

  • Mount: data-component="OnboardingProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PasswordStrengthMeter

Reusable password strength meter component.

  • Mount: data-component="PasswordStrengthMeter"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

PieChart

Reusable pie chart component.

  • Mount: data-component="PieChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ProductArchitectureDiagram

Reusable product architecture diagram component.

  • Mount: data-component="ProductArchitectureDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ProgressChart

Reusable progress chart component.

  • Mount: data-component="ProgressChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ProgressRing

Reusable progress ring component.

  • Mount: data-component="ProgressRing"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

RevenueChart

Reusable revenue chart component.

  • Mount: data-component="RevenueChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

SmartRouteDiagram

Reusable smart route diagram component.

  • Mount: data-component="SmartRouteDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

TenantIsolationDiagram

Reusable tenant isolation diagram component.

  • Mount: data-component="TenantIsolationDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

Timeline

Reusable timeline component.

  • Mount: data-component="Timeline"
  • Props: title: string = "Timeline"
  • Slots: default
  • Events: None

TimelineChart

Reusable timeline chart component.

  • Mount: data-component="TimelineChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

ToastProgress

Reusable toast progress component.

  • Mount: data-component="ToastProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

UploadProgress

Reusable upload progress component.

  • Mount: data-component="UploadProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

UptimeChart

Reusable uptime chart component.

  • Mount: data-component="UptimeChart"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

UptimeMetric

Reusable uptime metric component.

  • Mount: data-component="UptimeMetric"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

WebhookFlowDiagram

Reusable webhook flow diagram component.

  • Mount: data-component="WebhookFlowDiagram"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None

WorkflowProgress

Reusable workflow progress component.

  • Mount: data-component="WorkflowProgress"
  • Props: title: string = "", value: string = "", description: string = "", summary: string = "", loading: boolean = false, class: string = ""
  • Slots: default
  • Events: None