WRNexusJS/packages/ui/COMPONENTS.md

WRNexus UI component reference

This reference is generated from the 901 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

DoNotSellLink

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

ErrorSupportLink

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

ExternalLink

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: class: string = "", 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

LocalizedRouteLink

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 = "Continue with a passkey", description: string = "Use fingerprint, face recognition, or device PIN", href: string = "", type: string = "button", variant: string = "primary", disabled: boolean = false, class: string = ""
• Slots: None
• 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

SignInLink

Reusable sign in link component.

• Mount: data-component="SignInLink"
• Props: label: string = "Sign in with password", description: string = "Use your username or email and password", href: string = "", type: string = "button", variant: string = "secondary", disabled: boolean = false, icon: string = "icon-[lucide--lock-keyhole]", tone: string = "password", class: string = ""
• Slots: None
• Events: None

SkipLink

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

TextLink

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: class: string = "", 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: class: string = "", method: string = "GET", path: string = "/api/example", eyebrow: string = "", title: string = "", description: string = "", href: string = "", actionLabel: string = "View endpoint"
• 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: class: string = "", 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 = "", icon: string = "icon-[lucide--send]", 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

Carousel

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 = "", icon: string = "icon-[lucide--radio-tower]", 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: class: string = "", 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

CustomerLogo

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: class: string = "", icon: string = "icon-[lucide--sparkles]", 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: class: string = "", 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: class: string = "", 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 = "", icon: string = "icon-[lucide--plug-zap]", 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

Logo

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: class: string = "", eyebrow: string = "", title: string = "Stay up to date", description: string = "", placeholder: string = "Enter your email", buttonLabel: string = "Subscribe", action: string = "/newsletter/subscribe", method: string = "post", emailName: string = "email", privacyLabel: string = "", privacyHref: string = "/privacy", successMessage: string = "You are subscribed.", errorMessage: string = "Something went wrong. Please try again.", iconClass: string = "icon-[lucide--mail]", centered: boolean = false, compact: boolean = false, showIcon: boolean = true, showPrivacy: boolean = true, fullWidth: boolean = false
• Slots: None
• Events: submit, input

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: class: string = "", 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

ProductLogo

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

PublicHeaderLogo

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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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", badgeIcon: string = "icon-[lucide--sparkles]", actionIcon: string = "icon-[lucide--arrow-right]", dismissLabel: string = "Dismiss announcement", showBadge: boolean = true, showDescription: boolean = true, showAction: boolean = true, dismissible: boolean = true
• 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: class: string = "", 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: class: string = "", items: string = [], centered: boolean = false, compact: boolean = false, showHome: boolean = true, homeLabel: string = "Home", homeHref: string = "/"
• Slots: None
• Events: None

Checkbox

Reusable checkbox component.

• Mount: data-component="Checkbox"
• Props: class: string = "", 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

ContactSalesBanner

Reusable contact sales banner component.

• Mount: data-component="ContactSalesBanner"
• Props: class: string = "", eyebrow: string = "Enterprise identity", title: string = "Ready to secure your next application?", description: string = "", primaryLabel: string = "Contact sales", primaryHref: string = "/contact", secondaryLabel: string = "Start free", secondaryHref: string = "/sign-up", iconClass: string = "icon-[lucide--messages-square]", centered: boolean = false, compact: boolean = false, points: string = [], trustPoints: string = []
• Slots: None
• Events: None

Container

Reusable container component.

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

CookieConsent

Reusable cookie consent component.

• Mount: data-component="CookieConsent"
• Props: class: string = ""
• Slots: None
• Events: click, change

DevelopersMegaMenu

Reusable developers mega menu component.

• Mount: data-component="DevelopersMegaMenu"
• Props: class: string = ""
• Slots: None
• 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: class: string = "", title: string = "Panel", open: boolean = false, side: string = "right"
• Slots: default
• Events: click

FAQ

Reusable faq component.

• Mount: data-component="FAQ"
• Props: class: string = "", 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: class: string = "", 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

Link

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: class: string = "", eyebrow: string = "", title: string = "Trusted by teams building modern products", description: string = "", logos: string = [], centered: boolean = true, compact: boolean = false, variant: string = "strip", grayscale: boolean = true, showNames: boolean = false, maxItems: number = 8
• Slots: None
• Events: None

Modal

Reusable modal component.

• Mount: data-component="Modal"
• Props: class: string = "", 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

PageHeader

Reusable page header component.

• Mount: data-component="PageHeader"
• Props: class: string = "", eyebrow: string = "", title: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", icon: string = "sparkles", centered: boolean = false, compact: boolean = false, showBreadcrumbs: boolean = false, breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", highlights: string = []
• Slots: None
• 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: class: string = "", currentPage: number = 1, totalPages: number = 1, previousHref: string = "", nextHref: string = "", pages: string = [], showNumbers: boolean = true, showSummary: boolean = true, totalItems: number = 0, pageSize: number = 10, compact: boolean = false, centered: boolean = false
• 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

ProductMegaMenu

Reusable product mega menu component.

• Mount: data-component="ProductMegaMenu"
• Props: class: string = ""
• Slots: None
• 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: class: string = "", 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: class: string = "", homeHref: string = "/", brandName: string = "WrNexus", brandTagline: string = "Identity Cloud", brandAriaLabel: string = "WrNexus home", brandIcon: string = "icon-[lucide--blocks]", brandDescription: string = "Secure authentication, user management, organizations, authorization, and enterprise identity for modern applications.", statusLabel: string = "All systems operational", statusHref: string = "/status", newsletterEyebrow: string = "WrNexus updates", newsletterTitle: string = "Identity insights delivered to your inbox", newsletterDescription: string = "Get product updates, security guidance, implementation strategies, and practical identity architecture resources.", newsletterAction: string = "/api/newsletter/subscribe", newsletterButtonLabel: string = "Subscribe", newsletterPlaceholder: string = "Enter your work email", newsletterSuccessMessage: string = "Thanks. Please check your inbox to confirm your subscription.", newsletterPrivacyLabel: string = "privacy policy", newsletterPrivacyHref: string = "/privacy", newsletterFinePrintPrefix: string = "No spam. Unsubscribe at any time. Read our", newsletterFinePrintSuffix: string = ".", newsletterEmailLabel: string = "Work email address", newsletterEmailName: string = "email", copyrightText: string = "© 2026 WrNexus. All rights reserved.", attributionText: string = "Built by WorkRoot Workspace.", showNewsletter: boolean = true, showSocialLinks: boolean = true, showThemeToggle: boolean = true, showStatus: boolean = true, showCookiePreferences: boolean = true, cookiePreferencesLabel: string = "Cookie preferences", themeLabel: string = "Theme", themeToggleLabel: string = "Toggle color theme", legalTitle: string = "Legal", socialLinks: PublicFooterLink[] = [], navigationColumns: PublicFooterColumn[] = [], legalLinks: PublicFooterLink[] = [], navigationAriaLabel: string = "Footer navigation"
• Slots: navigation
• Events: submit

PublicMobileNavigation

Reusable public mobile navigation component.

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

PublicSearch

Reusable public search component.

• Mount: data-component="PublicSearch"
• Props: class: string = "", query: string = "", placeholder: string = "Search...", label: string = "Search", action: string = "", method: string = "get", name: string = "q", buttonLabel: string = "", clearLabel: string = "Clear search", size: string = "default", centered: boolean = false, fullWidth: boolean = false, showShortcut: boolean = false, shortcutLabel: string = "⌘ K", suggestions: string = []
• Slots: None
• Events: input, focus, blur, click

Radio

Reusable radio component.

• Mount: data-component="Radio"
• Props: class: string = "", 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: class: string = "", id: string = "", name: string = "", label: string = "Select", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false
• Slots: default
• Events: None

SocialShare

Reusable social share component.

• Mount: data-component="SocialShare"
• Props: class: string = "", title: string = "Share this page", description: string = "", url: string = "", shareText: string = "", centered: boolean = false, compact: boolean = false, showTitle: boolean = true, showCopy: boolean = true, networks: string = []
• Slots: None
• Events: click

spacer

Reusable spacer component.

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

Spinner

Reusable spinner component.

• Mount: data-component="Spinner"
• Props: class: string = "", 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

StatusBanner

Reusable status banner component.

• Mount: data-component="StatusBanner"
• Props: class: string = "", type: string = "info", title: string = "", description: string = "", actionLabel: string = "", actionHref: string = "", dismissible: boolean = true, compact: boolean = false, details: string = []
• Slots: None
• Events: click

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: class: string = "", 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: class: string = "", 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: class: string = "", title: string = "Saved", description: string = "", variant: string = "success", duration: number = 5000
• Slots: None
• Events: click

ToastHost

Reusable toast host component.

• Mount: data-component="ToastHost"
• Props: class: string = ""
• 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: class: string = "", 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: class: string = "", 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: class: string = "", label: string = "", variant: string = "neutral"
• Slots: default
• Events: None

Banner

Reusable banner component.

• Mount: data-component="Banner"
• Props: class: string = "", 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: class: string = "", 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: class: string = "", eyebrow: string = "", title: string = "Nothing found", description: string = "", iconClass: string = "icon-[lucide--inbox]", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", compact: boolean = false, centered: boolean = true, suggestions: string = []
• Slots: None
• Events: None

ErrorState

Reusable error state component.

• Mount: data-component="ErrorState"
• Props: class: string = "", type: string = "error", eyebrow: string = "", title: string = "Something went wrong", description: string = "", errorCode: string = "", iconClass: string = "", primaryLabel: string = "", primaryHref: string = "", secondaryLabel: string = "", secondaryHref: string = "", retryLabel: string = "", retryAction: string = "", centered: boolean = true, compact: boolean = false, details: string = []
• Slots: None
• Events: click

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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", id: string = "email", name: string = "email", label: string = "Email", value: string = "", placeholder: string = "you@company.com", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = "email"
• 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: class: string = "", 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: class: string = "", 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: class: string = "", name: string = "otp", length: number = 6, label: string = "Verification code"
• Slots: None
• Events: None

PasswordInput

Reusable password input component.

• Mount: data-component="PasswordInput"
• Props: class: string = "", id: string = "password", name: string = "password", label: string = "Password", value: string = "", placeholder: string = "Enter your password", help: string = "", error: string = "", required: boolean = false, disabled: boolean = false, readonly: boolean = false, autocomplete: string = "current-password", revealable: boolean = true
• Slots: None
• Events: click

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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", 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: class: string = "", homeHref: string = "/", brandName: string = "WrNexus", brandTagline: string = "Identity Cloud", brandAriaLabel: string = "WrNexus home", brandIcon: string = "icon-[lucide--blocks]", pricingLabel: string = "Pricing", pricingHref: string = "/pricing", statusLabel: string = "All systems operational", statusHref: string = "/status", signInLabel: string = "Sign in", signInHref: string = "/sign-in", primaryLabel: string = "Start free", primaryHref: string = "/sign-up", showStatus: boolean = true, showThemeToggle: boolean = true, showSignIn: boolean = true, showPrimaryAction: boolean = true, productLabel: string = "Product", solutionsLabel: string = "Solutions", developersLabel: string = "Developers", resourcesLabel: string = "Resources", navigationAriaLabel: string = "Main navigation", themeToggleLabel: string = "Toggle color theme", mobileMenuOpenLabel: string = "Open navigation menu", mobileMenuCloseLabel: string = "Close navigation menu", navigationItems: PublicHeaderNavigationItem[] = [], actionItems: PublicHeaderActionItem[] = [], showNavigation: boolean = true, showMobileThemeToggle: boolean = true
• Slots: navigation, actions
• 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: class: string = "", 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: class: string = "", 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: class: string = ""
• Slots: None
• 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: class: string = ""
• Slots: None
• 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: class: string = "", 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