WRNexusJS/packages/ui/COMPONENTS.md

WRNexus UI component reference

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

Advanced-forms

AdvancedSelect

Theme-aware, responsive advanced select component.

• Mount: data-component="AdvancedSelect"
• Props: size: string = "default", color: string = "primary", label: string = "Advanced Select", name: string = "", value: string = "", values: string = [], options: string = [], groups: string = [], placeholder: string = "Select an option", placeholderIcon: string = "", searchPlaceholder: string = "Search options…", multiple: boolean = false, searchable: boolean = true, defaultOpen: boolean = false, clearable: boolean = true, allowEmpty: boolean = true, tags: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading options…", emptyLabel: string = "No options found", selectedOptionsLabel: string = "Selected options", clearLabel: string = "Clear selection", createLabel: string = "Create", loadMoreLabel: string = "Load more", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, maxSelections: number = 0, showCounter: boolean = false, counterTemplate: string = "{selected} selected", optionTemplate: string = "default", selectedTemplate: string = "default", closeOnSelect: boolean = true, scrollToSelected: boolean = true, fixed: boolean = false, placement: string = "bottom", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, class: string = ""
• Slots: None
• Events: search, select, change, clear, open, close, load, error

ComboBox

Editable autocomplete combobox with local and remote suggestions.

• Mount: data-component="ComboBox"
• Props: size: string = "default", color: string = "primary", label: string = "ComboBox", name: string = "", value: string = "", options: string = [], groups: string = [], placeholder: string = "Search or select an option", searchPlaceholder: string = "Start typing…", clearable: boolean = true, allowCustomValue: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading suggestions…", emptyLabel: string = "No matching options", clearLabel: string = "Clear value", toggleLabel: string = "Toggle suggestions", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, optionTemplate: string = "default", defaultOpen: boolean = false, closeOnSelect: boolean = true, fixed: boolean = false, placement: string = "bottom", autocomplete: string = "off", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, loadMoreLabel: string = "Load more", class: string = ""
• Slots: None
• Events: search, select, change, clear, open, close, load, error

CopyMarkup

Theme-aware, responsive copy markup component.

• Mount: data-component="CopyMarkup"
• Props: size: string = "default", color: string = "primary", label: string = "Copy Markup", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

InputNumber

Theme-aware, responsive input number component.

• Mount: data-component="InputNumber"
• Props: size: string = "default", color: string = "primary", label: string = "Input Number", name: string = "", value: string = "", placeholder: string = "", type: string = "number", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

PinInput

Secure multi-cell PIN and verification-code input with regex and paste support.

• Mount: data-component="PinInput"
• Props: size: string = "default", color: string = "primary", label: string = "Verification code", name: string = "pin", value: string = "", length: number = 4, pattern: string = "[0-9]", type: string = "text", inputMode: string = "numeric", placeholder: string = "○", autocomplete: string = "one-time-code", masked: boolean = false, disabled: boolean = false, readonly: boolean = false, required: boolean = false, autoFocus: boolean = false, autoSubmit: boolean = false, allowPaste: boolean = true, clearable: boolean = true, clearLabel: string = "Clear code", separator: string = "", groupSize: number = 0, helpText: string = "", invalid: boolean = false, validationMessage: string = "", class: string = ""
• Slots: None
• Events: input, change, complete, paste, clear, error

SearchBox

Theme-aware, responsive search box component.

• Mount: data-component="SearchBox"
• Props: size: string = "default", color: string = "primary", label: string = "Search Box", name: string = "", value: string = "", placeholder: string = "", type: string = "search", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

StrongPassword

Theme-aware, responsive strong password component.

• Mount: data-component="StrongPassword"
• Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Create a strong password", autocomplete: string = "new-password", minLength: number = 8, specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?", requireLowercase: boolean = true, requireUppercase: boolean = true, requireNumber: boolean = true, requireSpecialCharacter: boolean = true, showRequirements: boolean = true, presentation: string = "inline", hintText: string = "Use a unique password you do not use elsewhere.", emptyLabel: string = "Enter a password", weakLabel: string = "Weak", fairLabel: string = "Fair", goodLabel: string = "Good", strongLabel: string = "Strong", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", class: string = ""
• Slots: None
• Events: input, change, strength

ToggleCount

Theme-aware, responsive toggle count component.

• Mount: data-component="ToggleCount"
• Props: size: string = "default", color: string = "primary", label: string = "Toggle Count", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

TogglePassword

Accessible password field with optional show and hide controls.

• Mount: data-component="TogglePassword"
• Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Enter your password", autocomplete: string = "current-password", minlength: string = "", maxlength: string = "", pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", fields: string = [], visible: boolean = false, toggleable: boolean = true, toggleMode: string = "button", checkboxLabel: string = "Show password", showLabel: string = "Show password", hideLabel: string = "Hide password", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, helpText: string = "", validationMessage: string = "", class: string = ""
• Slots: None
• Events: input, change, toggle

Base

Accordion

Theme-aware, responsive accordion component.

• Mount: data-component="Accordion"
• Props: size: string = "default", color: string = "primary", items: string = [], multiple: boolean = false, class: string = ""
• Slots: default
• Events: None

Alert

Theme-aware, responsive alert component.

• Mount: data-component="Alert"
• Props: size: string = "default", color: string = "primary", title: string = "Alert", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Avatar

Theme-aware, responsive avatar component.

• Mount: data-component="Avatar"
• Props: size: string = "default", color: string = "primary", title: string = "Avatar", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

AvatarGroup

Theme-aware, responsive avatar group component.

• Mount: data-component="AvatarGroup"
• Props: size: string = "default", color: string = "primary", title: string = "Avatar Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Badge

Theme-aware, responsive badge component.

• Mount: data-component="Badge"
• Props: size: string = "default", color: string = "primary", title: string = "Badge", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Blockquote

Theme-aware, responsive blockquote component.

• Mount: data-component="Blockquote"
• Props: size: string = "default", color: string = "primary", title: string = "Blockquote", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Button

Theme-aware, responsive button component.

• Mount: data-component="Button"
• Props: label: string = "Button", loadingLabel: string = "Loading…", description: string = "", as: string = "", href: string = "", target: string = "", rel: string = "", type: string = "button", variant: string = "default", color: string = "primary", size: string = "default", disabled: boolean = false, loading: boolean = false, pill: boolean = false, fullWidth: boolean = false, icon: string = "", iconPosition: string = "start", ariaLabel: string = "", ariaPressed: string = "", ariaExpanded: string = "", ariaControls: string = "", title: string = "", autofocus: boolean = false, controlClass: string = "", class: string = ""
• Slots: default
• Events: None

ButtonGroup

Theme-aware, responsive button group component.

• Mount: data-component="ButtonGroup"
• Props: size: string = "default", color: string = "primary", title: string = "Button Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Card

Theme-aware, responsive card component.

• Mount: data-component="Card"
• Props: size: string = "default", color: string = "primary", title: string = "Card", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Carousel

Theme-aware, responsive carousel component.

• Mount: data-component="Carousel"
• Props: size: string = "default", color: string = "primary", title: string = "Carousel", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

ChatBubble

Theme-aware, responsive chat bubble component.

• Mount: data-component="ChatBubble"
• Props: size: string = "default", color: string = "primary", title: string = "Chat Bubble", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Collapse

Theme-aware, responsive collapse component.

• Mount: data-component="Collapse"
• Props: size: string = "default", color: string = "primary", items: string = [], multiple: boolean = false, class: string = ""
• Slots: default
• Events: None

DatePicker

Theme-aware, responsive date picker component.

• Mount: data-component="DatePicker"
• Props: size: string = "default", color: string = "primary", label: string = "Date Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "date", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

DeviceFrame

Theme-aware, responsive device frame component.

• Mount: data-component="DeviceFrame"
• Props: size: string = "default", color: string = "primary", title: string = "Device Frame", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

FileUploadProgress

Theme-aware, responsive file upload progress component.

• Mount: data-component="FileUploadProgress"
• Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
• Slots: None
• Events: None

LegendIndicator

Theme-aware, responsive legend indicator component.

• Mount: data-component="LegendIndicator"
• Props: size: string = "default", color: string = "primary", title: string = "Legend Indicator", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

List

Theme-aware, responsive list component.

• Mount: data-component="List"
• Props: size: string = "default", color: string = "primary", title: string = "List", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

ListGroup

Theme-aware, responsive list group component.

• Mount: data-component="ListGroup"
• Props: size: string = "default", color: string = "primary", title: string = "List Group", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Marquee

Theme-aware, responsive marquee component.

• Mount: data-component="Marquee"
• Props: size: string = "default", color: string = "primary", title: string = "Marquee", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Progress

Theme-aware, responsive progress component.

• Mount: data-component="Progress"
• Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
• Slots: None
• Events: None

Rating

Theme-aware, responsive rating component.

• Mount: data-component="Rating"
• Props: size: string = "default", color: string = "primary", title: string = "Rating", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Skeleton

Theme-aware, responsive skeleton component.

• Mount: data-component="Skeleton"
• Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
• Slots: None
• Events: None

Spinner

Theme-aware, responsive spinner component.

• Mount: data-component="Spinner"
• Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
• Slots: None
• Events: None

StyledIcon

Theme-aware, responsive styled icon component.

• Mount: data-component="StyledIcon"
• Props: size: string = "default", color: string = "primary", title: string = "Styled Icon", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Timeline

Theme-aware, responsive timeline component.

• Mount: data-component="Timeline"
• Props: size: string = "default", color: string = "primary", title: string = "Timeline", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Toast

Theme-aware, responsive toast component.

• Mount: data-component="Toast"
• Props: size: string = "default", color: string = "primary", title: string = "Toast", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

TreeView

Theme-aware, responsive tree view component.

• Mount: data-component="TreeView"
• Props: size: string = "default", color: string = "primary", title: string = "Tree View", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Forms

Checkbox

Theme-aware, responsive checkbox component.

• Mount: data-component="Checkbox"
• Props: size: string = "default", color: string = "primary", label: string = "Checkbox", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
• Slots: None
• Events: None

ColorPicker

Theme-aware, responsive color picker component.

• Mount: data-component="ColorPicker"
• Props: size: string = "default", color: string = "primary", label: string = "Color Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "color", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

FileInput

Theme-aware, responsive file input component.

• Mount: data-component="FileInput"
• Props: size: string = "default", color: string = "primary", label: string = "File Input", name: string = "", value: string = "", placeholder: string = "", type: string = "file", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

Input

Theme-aware, responsive input component.

• Mount: data-component="Input"
• Props: size: string = "default", color: string = "primary", label: string = "Input", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

InputGroup

Theme-aware, responsive input group component.

• Mount: data-component="InputGroup"
• Props: size: string = "default", color: string = "primary", label: string = "Input Group", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

Radio

Theme-aware, responsive radio component.

• Mount: data-component="Radio"
• Props: size: string = "default", color: string = "primary", label: string = "Radio", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
• Slots: None
• Events: None

RangeSlider

Theme-aware, responsive range slider component.

• Mount: data-component="RangeSlider"
• Props: size: string = "default", color: string = "primary", label: string = "Range Slider", name: string = "", value: string = "", placeholder: string = "", type: string = "range", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

Select

Theme-aware, responsive select component.

• Mount: data-component="Select"
• Props: size: string = "default", color: string = "primary", label: string = "Select", name: string = "", value: string = "", options: string = [], placeholder: string = "Select an option", multiple: boolean = false, disabled: boolean = false, class: string = ""
• Slots: None
• Events: None

Switch

Theme-aware, responsive switch component.

• Mount: data-component="Switch"
• Props: size: string = "default", color: string = "primary", label: string = "Switch", name: string = "", value: string = "on", checked: boolean = false, disabled: boolean = false, class: string = ""
• Slots: None
• Events: None

Textarea

Theme-aware, responsive textarea component.

• Mount: data-component="Textarea"
• Props: size: string = "default", color: string = "primary", label: string = "Textarea", name: string = "", value: string = "", placeholder: string = "", rows: number = 5, disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

TimePicker

Theme-aware, responsive time picker component.

• Mount: data-component="TimePicker"
• Props: size: string = "default", color: string = "primary", label: string = "Time Picker", name: string = "", value: string = "", placeholder: string = "", type: string = "time", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
• Slots: None
• Events: None

Integrations

AdvancedDatePicker

Theme-aware, responsive advanced date picker component.

• Mount: data-component="AdvancedDatePicker"
• Props: size: string = "default", color: string = "primary", title: string = "Advanced Date Picker", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

AdvancedRangeSlider

Theme-aware, responsive advanced range slider component.

• Mount: data-component="AdvancedRangeSlider"
• Props: size: string = "default", color: string = "primary", title: string = "Advanced Range Slider", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Chart

Theme-aware, responsive chart component.

• Mount: data-component="Chart"
• Props: size: string = "default", color: string = "primary", title: string = "Chart", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Clipboard

Theme-aware, responsive clipboard component.

• Mount: data-component="Clipboard"
• Props: size: string = "default", color: string = "primary", title: string = "Clipboard", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Confetti

Theme-aware, responsive confetti component.

• Mount: data-component="Confetti"
• Props: size: string = "default", color: string = "primary", title: string = "Confetti", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

DataMap

Theme-aware, responsive data map component.

• Mount: data-component="DataMap"
• Props: size: string = "default", color: string = "primary", title: string = "Data Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

DataTable

Theme-aware, responsive data table component.

• Mount: data-component="DataTable"
• Props: size: string = "default", color: string = "primary", caption: string = "Data Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
• Slots: default
• Events: None

DragAndDrop

Theme-aware, responsive drag and drop component.

• Mount: data-component="DragAndDrop"
• Props: size: string = "default", color: string = "primary", title: string = "Drag And Drop", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

FileUpload

Theme-aware, responsive file upload component.

• Mount: data-component="FileUpload"
• Props: size: string = "default", color: string = "primary", title: string = "File Upload", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Map

Theme-aware, responsive map component.

• Mount: data-component="Map"
• Props: size: string = "default", color: string = "primary", title: string = "Map", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

ToastNotifications

Theme-aware, responsive toast notifications component.

• Mount: data-component="ToastNotifications"
• Props: size: string = "default", color: string = "primary", title: string = "Toast Notifications", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

WysiwygEditor

Theme-aware, responsive wysiwyg editor component.

• Mount: data-component="WysiwygEditor"
• Props: size: string = "default", color: string = "primary", title: string = "Wysiwyg Editor", description: string = "", items: string = [], variant: string = "default", class: string = ""
• Slots: default
• Events: None

Layout

Columns

Theme-aware, responsive columns component.

• Mount: data-component="Columns"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

Container

Theme-aware, responsive container component.

• Mount: data-component="Container"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

CustomScrollbar

Theme-aware, responsive custom scrollbar component.

• Mount: data-component="CustomScrollbar"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

Divider

Theme-aware, responsive divider component.

• Mount: data-component="Divider"
• Props: size: string = "default", color: string = "primary", label: string = "", orientation: string = "horizontal", class: string = ""
• Slots: None
• Events: None

Grid

Theme-aware, responsive grid component.

• Mount: data-component="Grid"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

Image

Theme-aware, responsive image component.

• Mount: data-component="Image"
• Props: size: string = "default", color: string = "primary", src: string = "", alt: string = "", width: string = "", height: string = "", loading: string = "lazy", rounded: boolean = false, class: string = ""
• Slots: default
• Events: None

Kbd

Theme-aware, responsive kbd component.

• Mount: data-component="Kbd"
• Props: size: string = "default", color: string = "primary", label: string = "⌘ K", class: string = ""
• Slots: default
• Events: None

LayoutSplitter

Theme-aware, responsive layout splitter component.

• Mount: data-component="LayoutSplitter"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

Link

Theme-aware, responsive link component.

• Mount: data-component="Link"
• Props: size: string = "default", color: string = "primary", label: string = "Link", href: string = "#", target: string = "", rel: string = "", external: boolean = false, class: string = ""
• Slots: default
• Events: None

Typography

Theme-aware, responsive typography component.

• Mount: data-component="Typography"
• Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
• Slots: default
• Events: None

Navigation

Breadcrumb

Theme-aware, responsive breadcrumb component.

• Mount: data-component="Breadcrumb"
• Props: size: string = "default", color: string = "primary", label: string = "Breadcrumb", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

MegaMenu

Theme-aware, responsive mega menu component.

• Mount: data-component="MegaMenu"
• Props: size: string = "default", color: string = "primary", label: string = "Mega Menu", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Nav

Theme-aware, responsive nav component.

• Mount: data-component="Nav"
• Props: size: string = "default", color: string = "primary", label: string = "Nav", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Navbar

Theme-aware, responsive navbar component.

• Mount: data-component="Navbar"
• Props: size: string = "default", color: string = "primary", label: string = "Navbar", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Pagination

Theme-aware, responsive pagination component.

• Mount: data-component="Pagination"
• Props: size: string = "default", color: string = "primary", label: string = "Pagination", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Scrollspy

Theme-aware, responsive scrollspy component.

• Mount: data-component="Scrollspy"
• Props: size: string = "default", color: string = "primary", label: string = "Scrollspy", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Sidebar

Theme-aware, responsive sidebar component.

• Mount: data-component="Sidebar"
• Props: size: string = "default", color: string = "primary", label: string = "Sidebar", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Stepper

Theme-aware, responsive stepper component.

• Mount: data-component="Stepper"
• Props: size: string = "default", color: string = "primary", label: string = "Stepper", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Tabs

Theme-aware, responsive tabs component.

• Mount: data-component="Tabs"
• Props: size: string = "default", color: string = "primary", label: string = "Tabs", items: string = [], active: string = "", orientation: string = "horizontal", class: string = ""
• Slots: default
• Events: None

Overlays

ContextMenu

Theme-aware, responsive context menu component.

• Mount: data-component="ContextMenu"
• Props: size: string = "default", color: string = "primary", title: string = "Context Menu", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Drawer

Theme-aware, responsive drawer component.

• Mount: data-component="Drawer"
• Props: size: string = "default", color: string = "primary", title: string = "Drawer", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Dropdown

Theme-aware, responsive dropdown component.

• Mount: data-component="Dropdown"
• Props: size: string = "default", color: string = "primary", title: string = "Dropdown", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Modal

Theme-aware, responsive modal component.

• Mount: data-component="Modal"
• Props: size: string = "default", color: string = "primary", title: string = "Modal", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Popover

Theme-aware, responsive popover component.

• Mount: data-component="Popover"
• Props: size: string = "default", color: string = "primary", title: string = "Popover", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Tooltip

Theme-aware, responsive tooltip component.

• Mount: data-component="Tooltip"
• Props: size: string = "default", color: string = "primary", title: string = "Tooltip", description: string = "", open: boolean = false, placement: string = "bottom", closeLabel: string = "Close", class: string = ""
• Slots: default
• Events: None

Tables

Table

Theme-aware, responsive table component.

• Mount: data-component="Table"
• Props: size: string = "default", color: string = "primary", caption: string = "Table", columns: string = [], rows: string = [], striped: boolean = true, class: string = ""
• Slots: default
• Events: None