# PlexUI for Vue
> PlexUI for Vue 3: the same components, props, markup and styles as the React library.

Vue 3 components with the same names, props, defaults and markup as the React library (https://plexui.com/llms.txt).
In Vue: `class` instead of `className`, slots instead of ReactNode props, `v-model:value` for controlled values, `@x` listeners for `onX` callbacks, flat named exports for compound parts (e.g. DialogTrigger), composables from @plexui/vue/composables/<name>.
Every example's code: https://plexui.com/llms-vue-full.txt

Install: npm install @plexui/vue @plexui/styles
Docs: https://plexui.com
Components: 50

## Setup

```css
@layer theme, base, components, utilities;
@import "tailwindcss";
@import "@plexui/styles/css";
@source "../node_modules/@plexui/vue";
```

Wrap your app with <PlexUIProvider :link-component="RouterLink"> from "@plexui/vue/components/PlexUIProvider"

Size scale: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl
Colors: primary, secondary, danger, success, warning, caution, discovery, info
Variants: solid, soft, outline, ghost

---

## Accordion
Vertically stacked panels that expand to reveal content, with one or several items open at a time and full keyboard navigation.
Import: import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@plexui/vue/components/Accordion"
Docs: https://plexui.com/vue/components/accordion
Props:
  - type ("single" | "multiple") — Required. Whether one item or many can be open at a time
  - v-model:value / value (string | string[]) — Controlled open item(s), named like the React prop
  - default-value (string | string[]) — Uncontrolled initial open item(s)
  - collapsible (boolean) default: false — When type="single", allow closing the open item
  - disabled (boolean) default: false — Disable every item
  - dir ("ltr" | "rtl") default: "ltr" — Reading direction
  - orientation ("horizontal" | "vertical") default: "vertical" — Layout axis
  - class (string) — Applied to the root <div>
  - @update:value ((value: string | string[]) => void) — Fires when the open item(s) change; closing the open item of a single accordion reports ""
  AccordionItem:
    - value (string) — Required. Unique identifier used by value / default-value
    - disabled (boolean) default: false — Disable this item
    - class (string) — Applied to the item wrapper
Examples: Overview, Single, Multiple, Disabled, Card

## Alert
Inline message for notices and warnings with semantic colors, variants, a title, a description, action slots, and a dismiss control.
Import: import { Alert } from "@plexui/vue/components/Alert"
Docs: https://plexui.com/vue/components/alert
Props:
  - title (string | slot) — Title displayed in the alert
  - description (string | slot) — Description text
  - actions (slot) — Actions (for example buttons)
  - actions-placement ("end" | "bottom") — Placement of actions; automatic from sizing when unset
  - actions-class-name (string) — Class applied to the actions container
  - color (SemanticColors) default: "primary" — Color scheme
  - variant ("solid" | "soft" | "outline") default: "outline" — Style variant
  - indicator (slot | false) — Custom indicator (slot), or :indicator="false" to hide it
  - @dismiss (() => void) — Shows the dismiss button when set
  - banner (boolean) default: false — Full-width strip: square corners, lines above and below only
Examples: Overview, Colors & variants, Title, Description, Actions, Action placement, Indicator, Dismissible, Banner

## Avatar
An avatar for user identities that shows an initial, a photo or an icon, with overflow counts, semantic colors and roundness options.
Import: import { Avatar } from "@plexui/vue/components/Avatar"
Docs: https://plexui.com/vue/components/avatar
Props:
  - name (string) — Display name; used for text initial when no image/icon
  - image-url (string) — Absolute URL for image avatar
  - Icon (Component) — Icon component for icon avatar, bound as :Icon
  - size (number) — Width and height in pixels
  - color ("primary" | "secondary" | "success" | "info" | "discovery" | "danger") default: "secondary" — Semantic color for text/icon avatar
  - variant ("soft" | "solid") default: "soft" — Style variant
  - overflow-count (number) — Show overflow count (e.g. +9)
  - class (string) — Applied to the avatar root
  - @click ((event: MouseEvent) => void) — Makes avatar interactive (renders a button)
  - @pointerdown ((event: PointerEvent) => void) — Makes avatar interactive (renders a button)
Examples: Overview, Text, Image, Icon, Overflow count, Sizing, Colors & variants, Roundness, Interactive

## Avatar Group
Stacks user avatars into a single overlapping cluster, with a configurable stacking direction and one size for the whole group.
Import: import { Avatar, AvatarGroup } from "@plexui/vue/components/Avatar"
Docs: https://plexui.com/vue/components/avatar-group
Props:
  - default slot (VNode[]) — The avatars of the group
  - size (number) — Size of all avatars in the group
  - stack ("start" | "end") default: "start" — Stacking direction
  - class (string) — Applied to the group container; other attributes are not forwarded
Examples: Overview, Stacking direction, Group sizing

## Badge
Compact label for statuses and inline metadata, with semantic colors, three variants and sizes, icon support, and a loading state.
Import: import { Badge } from "@plexui/vue/components/Badge"
Docs: https://plexui.com/vue/components/badge
Props:
  - default slot (VNode[]) — Content inside the badge
  - color ("secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution") default: "secondary" — Semantic color
  - variant ("solid" | "soft" | "outline") default: "soft" — Style variant
  - size ("sm" | "md" | "lg") default: "sm" — Badge size
  - pill (boolean) default: false — Fully rounded
  - class (string) — Class applied to the badge
Examples: Overview, Colors & variants, Size & roundness, Icon, Loading

## Breadcrumb
The trail of pages that leads to the current one, above a page title, with links, plain steps and the current page.
Import: import { Breadcrumb, BreadcrumbItem } from "@plexui/vue/components/Breadcrumb"
Docs: https://plexui.com/vue/components/breadcrumb
Props:
  - size ("sm" | "md") default: "md" — Text size: sm above a compact header, md above a page title
  - aria-label (string) default: "Breadcrumb" — Name of the navigation landmark
  - separator slot (VNode[]) default: a small chevron — What stands between two items
  - default slot (VNode[]) — The BreadcrumbItem elements
  BreadcrumbItem:
    - href (string) — Link destination. Internal paths use the link component from PlexUIProvider
    - to (string | RouteLocation) — Router destination, for link components that take to
    - current (boolean) default: false — The current page: plain text marked aria-current="page"
    - @click ((event: MouseEvent) => void) — Makes an item without a destination act as a button
    - class (string) — Applied to the li element
Examples: Overview, Sizes, Separator, Long trails

## Button
Button with four variants (solid, soft, outline, ghost), eight semantic colors, icon slots, loading, and block layout.
Import: import { Button } from "@plexui/vue/components/Button"
Docs: https://plexui.com/vue/components/button
Props:
  - color ("primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning") default: "primary" — Visual color scheme
  - variant ("solid" | "soft" | "outline" | "ghost") default: "solid" — Button style variant
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Control height and default gutter/icon size
  - pill (boolean) default: false — Fully rounded corners
  - block (boolean) default: false — Full width
  - uniform (boolean) default: false — Square icon button (width equals height)
  - disabled (boolean) default: false — Visually and accessibly disabled; click is not emitted
  - disabled-tone ("relaxed") — Default cursor instead of not-allowed while disabled
  - loading (boolean) default: false — Shows loading indicator
  - inert (boolean) default: loading — Accessibly disabled without visual change
  - selected (boolean) default: false — Selected state styling
  - optically-align ("start" | "end") — Offset gutter for optical alignment
  - gutter-size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl") — Horizontal padding size; defaults from size
  - icon-size ("sm" | "md" | "lg" | "xl" | "2xl") — Size of icons in the slot; defaults from size
  - type ("button" | "submit" | "reset") default: "button" — Native button type
  - @click ((event: MouseEvent) => void) — Emitted on click, unless disabled
Examples: Overview, Colors & variants, Sizing & roundness, Icons, Block, Disabled, Inert, Loading, Selected, Optical alignment

## Button Group
Join buttons into a single visual unit for toolbars, steppers, split buttons and search affordances.
Import: import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@plexui/vue/components/ButtonGroup"
Docs: https://plexui.com/vue/components/button-group
Props:
  - orientation ("horizontal" | "vertical") default: "horizontal" — Direction of the joined items
  - class (string) — Applied to the root <div>
  ButtonGroupText:
    - as-child (boolean) default: false — Render the slotted child (e.g. a <label> tied to an input) instead of a <div>
    - class (string) — Applied to the wrapper
Examples: Overview, Orientation, Size, Nested, Separator, Split, Input, Input group, Dropdown menu, Select, Popover

## Button Link
A semantic anchor with full button styling, for internal and external links with icons and block layout.
Import: import { ButtonLink } from "@plexui/vue/components/Button"
Docs: https://plexui.com/vue/components/button-link
Props:
  - default slot (VNode[]) — Content inside the link button
  - color ("primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning") default: "primary" — Visual color
  - variant ("solid" | "soft" | "outline" | "ghost") default: "solid" — Style variant
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Control height and typography scale
  - gutter-size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl") — Override horizontal padding
  - icon-size ("sm" | "md" | "lg" | "xl" | "2xl") — Override icon size
  - href (string) — Link URL
  - to (string | RouteLocationRaw) — Router link destination (internal)
  - as (Component) — Link component override (e.g. RouterLink, NuxtLink)
  - external (boolean) — Force external-link behavior
  - optically-align ("start" | "end") — Apply optical negative margin alignment
  - block (boolean) default: false — Full width
  - pill (boolean) default: false — Fully rounded
  - disabled (boolean) default: false — Disable link
  - disabled-tone ("relaxed") — Use relaxed visual tone for disabled state
  - @click ((event: MouseEvent) => void) — Emitted on click, unless disabled
Examples: Overview, Internal link, External link, Colors & variants, Sizing & roundness, Icons, Block, Disabled

## Card
Card surface for composing login flows, sign-up forms, pricing tiles, payment methods, empty states, and stat showcases.
Import: import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@plexui/vue/components/Card"
Docs: https://plexui.com/vue/components/card
Props:
  - variant ("outline" | "solid" | "ghost") default: "outline" — Visual variant
  - size ("sm" | "md" | "lg") default: "md" — Padding scale
  - interactive (boolean) default: false — Adds hover and focus affordances. Automatic when href is set.
  - href (string) — Renders the Card as a link via the linkComponent of PlexUIProvider. A link component that takes to, such as RouterLink, gets it as to.
  - external (boolean) default: auto-detected — Forces target="_blank" and rel="noopener noreferrer" when href is set.
  - as (Component | "a") — Overrides the link component.
  - class (string) — Applied to the root element
Examples: Overview, Login, Create project, Payment Method, No team members (empty state), How did you hear about us?, Processing your request, Pricing

## Checkbox
Checkbox for binary on/off selection with solid, pill, and ghost variants, an indeterminate state, and rich labels with inline descriptions.
Import: import { Checkbox } from "@plexui/vue/components/Checkbox"
Docs: https://plexui.com/vue/components/checkbox
Props:
  - variant ("solid" | "ghost") default: "solid" — Visual style: solid (filled background) or ghost (checkmark only)
  - pill (boolean) default: false — Fully rounded indicator corners
  - checked / v-model:checked (boolean | "indeterminate") — Controlled state
  - default-checked (boolean | "indeterminate") — Initial state (uncontrolled)
  - label (string) — Accessible label rendered next to the checkbox
  - label slot (VNode[]) — Rich label content; takes precedence over the label prop
  - description (string) — Second line below the label, linked via aria-describedby (or the description slot)
  - disabled (boolean) default: false — Prevent interaction
  - required (boolean) — Required for form submission
  - name (string) — Form field name
  - value (string) default: "on" — Value when submitted
  - orientation ("left" | "right") default: "left" — Checkbox position relative to the label
  - class (string) — CSS classes applied to the wrapper node
  - id (string) — The id of the checkbox element (generated when omitted)
  - @update:checked ((next: boolean | "indeterminate") => void) — Emitted with the next state when it changes (a click always emits a boolean)
  - @focus ((event: FocusEvent) => void) — Emitted when the checkbox gains focus
  - @blur ((event: FocusEvent) => void) — Emitted when the checkbox loses focus
Examples: Overview, With Radio Group, Descriptions, Variants, Pill, Ghost, With description, Indeterminate, Disabled, Label orientation, Without label, Group with select all, Group with description, With Field, Grouped sections

## Code Block
Code block with syntax highlighting, a copy button, and collapsible long snippets with configurable expanded height limits.
Import: import { CodeBlock } from "@plexui/vue/components/CodeBlock"
Docs: https://plexui.com/vue/components/code-block
Props:
  - default slot (string) — Code content (text only; interpolate a string to keep its whitespace)
  - code (string) — Code content, used when the default slot is empty
  - language (string) — Prism language name
  - class (string) — Additional wrapper class
  CollapsibleCodeBlock:
    - default slot / code (string) — Code content
    - language (string) — Prism language name
    - default-expanded (boolean) default: false — Start expanded
    - collapsed-height (number) default: 140 — Height when collapsed (px)
    - max-expanded-height (number) — Max height when expanded (px); taller code scrolls
    - copyable (boolean) default: true — Show copy button
    - class (string) — Additional wrapper class
Examples: Overview, Collapsible, Expanded by default, Custom collapsed height, Max expanded height, Without copy button, Supported languages

## Copy Tooltip
A copy-to-clipboard tooltip that wraps any trigger element and confirms when the value has been copied.
Import: import { CopyTooltip, TooltipTriggerDecorator } from "@plexui/vue/components/Tooltip"
Docs: https://plexui.com/vue/components/copy-tooltip
Props:
  - default slot (VNode) — Trigger element (for example TooltipTriggerDecorator)
  - copy-value (string) — Required. Content to copy to clipboard
  - open-delay (number) default: 150 — Tooltip open delay in milliseconds
  - align ("start" | "center" | "end") default: "center" — Preferred tooltip alignment against the trigger
  - align-offset (number) default: 0 — Offset from start/end alignment in pixels
  - side ("top" | "right" | "bottom" | "left") default: "top" — Preferred side of the trigger
  - side-offset (number) default: 5 — Distance from trigger in pixels
  - @copy ((copied: boolean) => void) — Emitted once the clipboard write settles, with whether it succeeded. The tooltip says Copied! only after a successful write
Examples: Overview

## Date Input
Masked text input for typing dates and times, with automatic formatting, min and max limits, and validation.
Import: import { DateInput } from "@plexui/vue/components/DateInput"
Docs: https://plexui.com/vue/components/date-input
Props:
  - value / v-model:value (DateTime | null) — Selected date (Luxon DateTime)
  - @update:value ((date: DateTime | null) => void) — Emitted when a complete valid date is entered or the field is cleared
  - @change ((date: DateTime | null) => void) — Same payload as update:value, named after React's onChange
  - mode (MaskitoDateMode) default: "dd/mm/yyyy" — Date format mode: dd/mm/yyyy, mm/dd/yyyy, yyyy/mm/dd, etc.
  - separator (string) default: "." — Character between date parts
  - time-mode (MaskitoTimeMode) — Enable time input: HH:MM, HH:MM:SS, etc.
  - date-time-separator (string) default: ", " — Separator between date and time parts
  - time-step (number) default: 0 — Arrow-key increment step for time segments
  - min (DateTime) — Earliest allowed date
  - max (DateTime) — Latest allowed date
  - clearable (boolean) default: false — Show clear button when input has a value
  - size (ControlSize) default: "md" — Input size (3xs to 3xl)
  - variant ("outline" | "soft") default: "outline" — Visual style
  - pill (boolean) default: false — Fully rounded corners
  - disabled (boolean) default: false — Disable input
  - invalid (boolean) default: false — Mark as invalid
  - placeholder (string) — Generated from the format if not set
Examples: Overview, With time, With seconds, Limits, US format, ISO format, With Field, Validation, Disabled

## Date Picker
Date picker with an interactive calendar, time picker, year and month dropdowns, min/max limits, and date-of-birth presets.
Import: import { DatePicker } from "@plexui/vue/components/DatePicker"
Docs: https://plexui.com/vue/components/date-picker
Props:
  - value / v-model:value (DateTime | null) default: null — Selected date (luxon)
  - @change ((date: DateTime | null) => void) — Emitted when the date changes, with the same value as update:value
  - id (string) — Id of the trigger, for forms and labels
  - min (DateTime) — Earliest selectable date (inclusive)
  - max (DateTime) — Latest selectable date (inclusive). Must not be before min
  - caption-layout ("buttons" | "dropdown") default: "buttons" — Calendar header mode. Use dropdown for date of birth
  - show-time (boolean) default: false — Show time input below calendar
  - year-range ([number, number]) default: last 120 years — Min/max years for dropdown caption
  - size (ControlSize) default: "md" — Trigger size (3xs to 3xl)
  - variant ("outline" | "soft" | "ghost") default: "outline" — Trigger style
  - pill (boolean) default: true — Rounded trigger
  - block (boolean) default: false — Full-width trigger
  - clearable (boolean) default: false — Show clear button
  - trigger-show-icon (boolean) default: true — Show calendar icon
  - trigger-date-format (string) default: "MM/dd/yy" — Date format in trigger. Auto-includes time when show-time is enabled
  - trigger-class-name (string) — Class applied to the trigger
  - dropdown-icon-type ("dropdown" | "chevronDown" | "none") default: "dropdown" — Icon at the end of the trigger
  - placeholder (string) default: "Select date..." — Trigger placeholder
  - disabled (boolean) default: false — Disable picker
  - side ("top" | "right" | "bottom" | "left") default: "bottom" — Preferred side of the calendar popover
  - side-offset (number) default: 8 — Distance from the trigger in pixels
  - align ("start" | "center" | "end") default: "center" — Alignment against the trigger
  - align-offset (number) default: 0 (center), -5 (start, end) — Offset from start/end alignment in pixels
Examples: Overview, Limits, Date of birth, Time picker, Dropdown + time, Two fields, Date input, DateTime input, Without Icon, Disabled

## Date Range Picker
Date range picker with an interactive calendar, min/max limits, preset shortcuts, and a month stepper for selecting start and end dates.
Import: import { DateRangePicker } from "@plexui/vue/components/DateRangePicker"
Docs: https://plexui.com/vue/components/date-range-picker
Props:
  - value / v-model:value (DateRange | null) — Selected range ([start, end], inclusive)
  - @change ((next: DateRange | null, shortcut?: DateRangeShortcut) => void) — Emitted when the range changes
  - min (DateTime) — Earliest selectable date (inclusive)
  - max (DateTime) — Latest selectable date (inclusive). Must not be before min
  - max-range-days (number) — Max length of range in days (inclusive)
  - shortcuts (DateRangeShortcut[]) — Quick selection shortcuts ({ label, getDateRange })
  - side ("top" | "right" | "bottom" | "left") default: "bottom" — Preferred side for popover
  - side-offset (number) default: 8 — Distance from trigger in pixels
  - align ("start" | "center" | "end") default: "center" — Preferred popover alignment
  - align-offset (number) default: 0 (center), -5 (start, end) — Offset from start/end alignment in pixels
  - disabled (boolean) default: false — Disable picker interactions
  - placeholder (string) default: "Select date range..." — Placeholder in trigger when value is empty
  - variant ("soft" | "outline" | "ghost") default: "outline" — Trigger style variant
  - pill (boolean) default: true — Rounded trigger shape
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Trigger size scale
  - dropdown-icon-type ("chevronDown" | "dropdown" | "none") default: "dropdown" — Icon shown at trigger end
  - trigger-class-name (string) — Custom class for trigger
  - trigger-show-icon (boolean) default: true — Show calendar icon at trigger start
  - trigger-stepper-unit ("month") — Enable month stepper mode in trigger
  - trigger-date-format (string) default: "MM/dd/yy" — Date formatting in trigger text
  - clearable (boolean) default: false — Show clear button in trigger
  - block (boolean) default: false — Stretch trigger to full available width
Examples: Overview, Limits, Shortcuts, Month stepper

## Dialog
Modal dialog for confirmations, forms, and destructive alerts, with a focus trap, escape handling, and an overlay scrim.
Import: import { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@plexui/vue/components/Dialog"
Docs: https://plexui.com/vue/components/dialog
Props:
  - open / v-model:open (boolean) — Controlled open state; uncontrolled when omitted
  - @update:open ((open: boolean) => void) — Fires when the dialog opens or closes
  DialogContent:
    - width (number | string) default: 480 — Panel width
    - show-close (boolean) default: true — Show close button in top-right corner
    - class (string) — Additional CSS class on the panel
    - placement ("center" | "top" | "bottom" | "start" | "end" | "fullscreen") default: "center" — Where the panel sits: centered, near the top, a bottom sheet, a side panel, or the whole screen
    - mobile-placement ("center" | "bottom" | "fullscreen") — Placement at 640px and below; defaults to placement
    - @open-auto-focus ((event: Event) => void) — Called when focus moves into the dialog on open; call event.preventDefault() to place it yourself, for example on the panel instead of the first field
    - @close-auto-focus ((event: Event) => void) — Called when focus returns on close; call event.preventDefault() to keep it elsewhere
Examples: Overview, Destructive confirmation, Scrolling body, Placement

## Empty Message
Empty state for telling users there's nothing to show, with error, warning, no-results, and onboarding compositions.
Import: import { EmptyMessage, EmptyMessageActionRow, EmptyMessageDescription, EmptyMessageIcon, EmptyMessageTitle } from "@plexui/vue/components/EmptyMessage"
Docs: https://plexui.com/vue/components/empty-message
Props:
  - fill ("static" | "absolute" | "none") default: "static" — How the container fills its parent: "static" takes full width and height, "absolute" covers a positioned parent (inset 0), "none" applies no sizing
  - size ("sm" | "md") default: "md" — sm is the compact message for a panel, a card section or an empty list
  - align ("center" | "start") default: "center" — start left-aligns the message, for an empty state under a section heading
  EmptyMessageIcon:
    - color ("secondary" | "danger" | "warning") default: "secondary" — Semantic color
    - size ("sm" | "md") default: "md" — Icon badge size
  EmptyMessageTitle:
    - color ("secondary" | "danger" | "warning") default: "secondary" — Semantic color
  EmptyMessageActionRow:
    - class (string) — Additional classes for the action row container
Examples: Composition, Error message, Warning message, No results, Compact, Left aligned

## Field
Form field wrapper with a label, helper text, an error message, and automatic accessibility linking to its control.
Import: import { Field } from "@plexui/vue/components/Field"
Docs: https://plexui.com/vue/components/field
Props:
  - label (string) — Label text for the field
  - label slot (VNode[]) — Rich label content; takes precedence over the label prop
  - description (string) — Helper text below the label; linked via aria-describedby (or the description slot)
  - error-message (string) — Error message below the control; sets aria-invalid on the child (or the errorMessage slot)
  - label-action (string) — Content at the end of the label row, such as a link that acts on the field (or the labelAction slot)
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: child's size, else "md" — Label font size; defaults to the child control's size
  - required (boolean) default: false — Shows a required asterisk after the label (visual only)
  - orientation ("vertical" | "horizontal") default: "vertical" — Layout direction of label and control
  - optically-align ("start" | "end") — Applies optical alignment to the child control via negative margin using its gutter
  - id (string) — Override the generated id used for the label's for and aria linking
  - class (string) — CSS classes applied to the root element
  - default slot ((fieldProps) => VNode[]) — Form control; its single root element receives id, aria-describedby and aria-invalid (plus aria-labelledby unless it has its own name) unless the slot reads fieldProps, which include aria-labelledby
Examples: Overview, With description, With error message, Required, Sizing, Horizontal layout, Textarea, Select, Label action, Slider, Fieldset, Checkbox, Radio, Switch, Field group, Validation and Errors, Optical alignment, Form example, Profile settings, Create project, Field configuration, Birthday input, Birthday with validation, Birthday segmented input, Birthday with selects

## File Upload
Mobile-first file upload with MIME-type and size validation, multi-file selection, error states, and read-only file cards.
Import: import { FileUpload, FileCard, FileCardGroup } from "@plexui/vue/components/FileUpload"
Docs: https://plexui.com/vue/components/file-upload
Props:
  - variant ("compact" | "area") default: "compact" — Visual variant: compact button or larger tappable area
  - label (string) — Button label text
  - description (string) — Helper text below the icon (area variant only)
  - accept (string) — Accepted file types (e.g. ".pdf,.png,image/*")
  - multiple (boolean) default: false — Allow selecting multiple files. Without it, a new pick replaces the current file
  - max-files (number) — Maximum number of files. Button disables at limit.
  - max-size (number) — Maximum file size in bytes
  - value / v-model:value (File[]) — Controlled file list; `update:value` fires when files are added or removed
  - @file-reject ((file: File, reason: string) => void) — Fires when a file is rejected (wrong type, too large, over limit)
  - error-message (string) — Error message; sets the invalid visual state
  - invalid (boolean) default: false — Invalid state (auto-set when error-message is provided)
  - disabled (boolean) default: false — Disable all interactions
  - id (string) — Id of the hidden file input
  - class (string) — Additional CSS class
  FileCard:
    - file (File) — The file to display
    - @remove (() => void) — Remove callback. When omitted, the delete button is hidden.
    - disabled (boolean) default: false — Disable the remove button
    - class (string) — Additional CSS class
  FileCardGroup:
    - default slot (VNode[]) — FileCard elements
    - class (string) — Additional CSS class
Examples: Overview, With files, Error state, Disabled, Read-only, With remove, Multiple files, Read-only list

## Float Input
Text input whose label floats above the value, with error and helper text, a clear button, a password reveal toggle, and a multi-line variant.
Import: import { FloatingLabelInput } from "@plexui/vue/components/FloatingLabelInput"
Docs: https://plexui.com/vue/components/floating-label-input
Props:
  - label (string) — Label text for the floating label
  - value / v-model:value (string) — Controlled value; `update:value` fires on input
  - default-value (string) — Initial value when uncontrolled
  - error-message (string) — Error message to display below the input
  - invalid (boolean) default: false (true if error-message) — Mark the input as invalid
  - description (string | slot) — Helper text below the input
  - disabled (boolean) default: false — Disables the input
  - read-only / readonly (boolean) default: false — Makes the input read-only (both spellings work)
  - type (string) default: "text" — Input type; password gets a reveal toggle
  - revealable (boolean) default: true for password without an end adornment — Built-in reveal toggle
  - multiline (boolean) default: false — Render an auto-growing textarea
  - rows (number) default: 2 — Visible lines when multiline
  - allow-autofill-extensions (boolean) default: false — Let password-manager extensions decorate the input
  - #startAdornment / #endAdornment (slots) — Content before or after the input (camelCase slot names). A start adornment is always shown and keeps the label floated
  - @clear (() => void) — Shows the clear button and fires when it is clicked; focus returns to the input
  - @revealed-change ((revealed: boolean) => void) — Fires when the reveal toggle is clicked
  - @autofill (() => void) — Fires when the browser autofills the input
Examples: Overview, Filled state, Textarea, With error message, With description, With description and error, Clear button, Disabled, Read only, All states, Password input, SSN input, Birthday input, Birthday with validation, Birthday states, Select, Multiple selection, Country select, Phone input

## Indicators
Loading and progress indicators, from circular spinners and determinate progress rings to animated dots, with configurable color and stroke.
Import: import { LoadingIndicator, CircularProgress, LoadingDots } from "@plexui/vue/components/Indicator"
Docs: https://plexui.com/vue/components/indicators
  LoadingIndicator:
    - size (number | string) default: "1em" — Size in px or any CSS length (or use the --indicator-size CSS variable)
    - stroke-width (number) default: 2 — Stroke width in px
  CircularProgress:
    - progress (number) — Static progress 0-100 (disables the simulated animation)
    - done (boolean) default: false — Fills the ring and ends the simulated progress
    - max-duration (number) default: 15000 — Duration of the simulated progress in ms
    - size (number | string) default: "28px" — Diameter in px or any CSS length
    - stroke-width (number) default: 2 — Stroke thickness in px, capped at 4
    - track-color (string) — Track color (CSS variable or value)
    - track-active-color (string) — Active segment color
Examples: Overview, LoadingIndicator, Sizing & stroke, Color, Duration, CircularProgress, Progress, Sizing & stroke, Color, LoadingDots, Color

## Input
Text input with start and end adornments, a clear button, a password visibility toggle, and presets for SSN and birthday.
Import: import { Input, InputAdornmentButton } from "@plexui/vue/components/Input"
Docs: https://plexui.com/vue/components/input
Props:
  - value / v-model:value (string | number) — Controlled value; `update:value` fires on every input
  - default-value (string | number) — Initial value when uncontrolled
  - variant ("outline" | "soft" | "ghost") default: "outline" — Visual style of the input; ghost has no border and no fill
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Controls the size of the input
  - gutter-size (string) — Controls gutter on the edges; defaults to value from size
  - disabled (boolean) default: false — Disables the input visually and from interactions
  - read-only / readonly (boolean) default: false — Makes the input read-only and hides the clear button
  - invalid (boolean) default: false — Mark the input as invalid
  - allow-autofill-extensions (boolean) default: false (true with name or type="password") — Allow autofill extensions to appear in the input
  - auto-select (boolean) default: false — Select all contents of the input when mounted
  - startAdornment / endAdornment (slots) — Content rendered at the start or end of the input
  - @clear ((event: MouseEvent) => void) — When set, displays a clear button that appears when the input has a value
  - @autofill (() => void) — Fires when the browser autofills the input
  - pill (boolean) default: false — Fully rounded pill shape
  - optically-align ("start" | "end") — Applies a negative margin using the current gutter to optically align with surrounding content
  InputAdornmentButton:
    - color (SemanticColor) — Tint of the pressed (aria-pressed="true") state; the neutral primary-soft tint when unset
    - type (string) default: "button" — Button type
Examples: Overview, Variants, Sizing & roundness, Start adornment, Clear button, End adornment, Password with visibility toggle, SSN input, Birthday input, Birthday with validation, Disabled, Invalid, Auto select text, Autofill extensions, With button, Optical alignment

## Input Group
Input or textarea with icons, text, buttons and menus attached inside one frame, inline or as header and footer rows, in every input size and style.
Import: import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@plexui/vue/components/InputGroup"
Docs: https://plexui.com/vue/components/input-group
Props:
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Control height, on the same scale as Input (22px to 48px)
  - variant ("outline" | "soft") default: "outline" — Visual style of the frame
  - pill (boolean) default: false — Fully rounded frame, with pill buttons inside
  - disabled (boolean) default: false — Disables the control and the buttons inside
  - invalid (boolean) default: false — Invalid border; sets aria-invalid on the control
  - class (string) — Applied to the root <div>
  InputGroupAddon:
    - align ("inline-start" | "inline-end" | "block-start" | "block-end") default: "inline-start" — Before or after the control on its line, or a row above or below it
    - class (string) — Applied to the addon <div>
Examples: Overview, Variants, Sizes, Align, Text, Button, Dropdown, Spinner, Textarea

## Kbd
A key or a keyboard shortcut, such as ⌘K, set inline in text, in a tooltip or at the end of a menu item.
Import: import { Kbd, KbdGroup } from "@plexui/vue/components/Kbd"
Docs: https://plexui.com/vue/components/kbd
Props:
  - size ("xs" | "sm" | "md") default: "sm" — Height and text size: 16px, 20px or 24px
  - variant ("soft" | "outline") default: "soft" — soft fills the key, outline draws its edge; both mix the text color
  - class (string) — Applied to the kbd element
  - default slot (VNode[]) — The key
Examples: Overview, Shortcut, Sizes and variants, In a tooltip and a menu

## Label
Accessible form label that points at any control by its id, so clicking it focuses or toggles the control, with consistent typography across forms.
Import: import { Label } from "@plexui/vue/components/Label"
Docs: https://plexui.com/vue/components/label
Props:
  - for (string) — id of the associated control. Clicks on the label focus or activate the control.
  - class (string) — Applied to the root <label> element
  - default slot (VNode[]) — Label content
Examples: Overview, Label in Field

## Markdown
Markdown renderer for rich formatted content, with headings, lists, tables, code blocks, and KaTeX math expressions out of the box.
Import: import { Markdown } from "@plexui/vue/components/Markdown"
Docs: https://plexui.com/vue/components/markdown
Props:
  - default slot (string) — Markdown source (text only; interpolate a string to keep its newlines)
  - source (string) — Markdown source, used when the default slot is empty
  - include-math (boolean) default: false — Enable LaTeX math rendering
  - break-new-lines (boolean) default: false — Turn single newlines into line breaks
  - copyable-code-blocks (boolean) default: true — Show a copy button on code blocks
  - collapsible-code-blocks (boolean) default: true — Render code blocks in the collapsible view with a View Code button
  - components (Record<string, MarkdownComponent>) — Tag name to component overrides, applied over the built-in ones
  - directives (MarkdownDirective[]) — Custom directives, each rendered by its own component
  - remark-plugins (PluggableList) — Extra remark plugins, after the built-in ones
  - rehype-plugins (PluggableList) — Extra rehype plugins
  - allowed-elements (string[]) — Only render these elements
  - disallowed-elements (string[]) — Never render these elements
  - skip-html (boolean) default: false — Ignore raw HTML in the source
  - url-transform ((url: string) => string) — Rewrites URLs; the default drops unsafe protocols (javascript:) and keeps tel: and sms:
  - class (string) — Applied to the wrapping element
Examples: Overview, Math

## Markdown Editor
Compact rich text editor powered by Tiptap, embedded in a form field, with a markdown formatting toolbar, variants, and an invalid state.
Import: import { MarkdownEditor } from "@plexui/vue/components/MarkdownEditor"
Docs: https://plexui.com/vue/components/markdown-editor
Props:
  - variant ("outline" | "soft") default: "outline" — Visual style of the editor
  - disabled (boolean) default: false — Disable the editor
  - invalid (boolean) default: false — Mark as invalid
  - placeholder (string) — Placeholder text when empty
  - value / v-model:value (string) — Controlled markdown value; `update:value` fires on every change
  - default-value (string) — Initial markdown for uncontrolled mode
  - @change ((markdown: string) => void) — Called on content change
  - toolbarEnd slot (VNode[]) — Content rendered at the end of the toolbar
  - rows (number) default: 1 — Minimum visible rows
  - id (string) — id of the editable element (Field sets it)
  - aria-label (string) — Accessible name of the editable element
  - aria-labelledby (string) — Id of the element that names the editor, such as a visible label
  - aria-describedby (string) — aria-describedby of the editable element (Field sets it)
  - aria-invalid (boolean) — Sets aria-invalid on the editable element and the invalid style (Field sets it with error-message)
  - class (string) — Applied to the container
Examples: Placeholder, All formatting, With Field, Toolbar end slot, Variants, Disabled, Invalid

## Menu
Dropdown menu for structured actions with grouped items, submenus, checkbox and radio items, and horizontal layouts.
Import: import { Menu, MenuContent, MenuItem, MenuLink, MenuSeparator, MenuTrigger } from "@plexui/vue/components/Menu"
Docs: https://plexui.com/vue/components/menu
Props:
  - force-open (boolean) — Keep menu open (controlled)
  - modal (boolean) default: false — Whether menu is modal (focus trap)
  - @open (() => void) — Emitted when menu opens
  - @close (() => void) — Emitted when menu closes
  MenuTrigger:
    - disabled (boolean) default: false — Prevent the menu from opening
  MenuContent:
    - width (number | "auto") default: "auto" — Panel width (numbers are pixels)
    - min-width (number | "auto") default: 300 — Minimum panel width
    - max-height (number) — Maximum panel height, in pixels
    - side ("top" | "right" | "bottom" | "left") default: "bottom" — Preferred placement
    - side-offset (number) default: 5 — Distance from the trigger, in pixels
    - align ("start" | "center" | "end") default: "center" — Alignment relative to trigger
    - align-offset (number) default: -5 — Offset from the start or end alignment, in pixels
    - layout ("vertical" | "horizontal") default: "vertical" — Layout direction. Use horizontal for icon toolbars
    - size ("sm" | "md" | "lg") default: "md" — Size of horizontal menu items (icon size + padding)
    - @close-auto-focus ((event: Event) => void) — Emitted before focus returns to the trigger; call event.preventDefault() to keep it from moving there
  MenuItem:
    - description (string) — Second line under the label (or the description slot). The label turns semibold on its own
    - disabled (boolean) default: false — Disable the item
    - danger (boolean) default: false — Destructive action: the item is drawn in the danger color
    - @select ((event: Event) => void) — Called when the item is selected; call event.preventDefault() to keep the menu open
    - @click ((event: MouseEvent) => void) — Called when the item is clicked; also makes the item interactive
  MenuCheckboxItem:
    - checked / v-model:checked (boolean | "indeterminate") default: false — Checked state
    - @checked-change ((checked: boolean) => void) — Emitted with update:checked when the checkbox toggles
    - @select ((event: Event) => void) — Call event.preventDefault() to keep the menu open
    - indicator-position ("start" | "end") default: "end" — Checkbox position
    - indicator-variant ("solid" | "ghost") default: "solid" — Indicator style
    - disabled (boolean) default: false — Disable the item
Examples: Overview, Natural sizing, Horizontal (icons only), Horizontal (icons with labels), Grouped items, Submenus, Checkbox items, Radio items, Item actions, Destructive items

## OTP Input
Input for one-time passwords and verification codes, with split digit cells, grouped layouts, error states, and autofill.
Import: import { OTPInput } from "@plexui/vue/components/OTPInput"
Docs: https://plexui.com/vue/components/otp-input
Props:
  - length (number) default: 6 — Number of digit cells
  - value / v-model:value (string) — Controlled value; `update:value` fires on every change
  - @change ((value: string) => void) — Fires when the value changes
  - @complete ((value: string) => void) — Fires when all digits are filled
  - grouping (number[]) — Grouping pattern with extra gap (e.g. [3,3])
  - invalid (boolean) default: false — Invalid visual state
  - error-message (string) — Error message below the input
  - disabled (boolean) default: false — Disable all cells
  - auto-focus (boolean) default: false — Auto-focus first cell on mount
  - class (string) — Applied to the root element
Examples: Overview, Filled state, Grouped (3+3), With error, Disabled

## Popover
A floating panel for contextual UI, with flexible sizing, hover triggers, a controllable open state and nesting.
Import: import { Popover, PopoverContent, PopoverTrigger } from "@plexui/vue/components/Popover"
Docs: https://plexui.com/vue/components/popover
Props:
  - open / v-model:open (boolean) — Controlled open state; uncontrolled when omitted
  - @update:open ((nextState: boolean) => void) — Emitted when the popover opens or closes
  - show-on-hover (boolean) default: false — Open on hover and focus instead of click
  - hover-open-delay (number) default: 150 — Delay before a hover popover opens (ms)
  PopoverContent:
    - width (number | "auto") default: "auto" — Panel width in px
    - min-width (number | "auto") default: 300 — Minimum panel width in px
    - max-width (number) default: 700 — Maximum panel width in px, capped by the space available in the viewport
    - side ("top" | "right" | "bottom" | "left") default: "bottom" — Preferred placement; flips when it collides
    - align ("start" | "center" | "end") default: "center" — Alignment relative to trigger
    - side-offset (number) default: 8 — Offset from trigger (px)
    - align-offset (number) default: -5 — Offset from the start or end alignment (px)
    - avoid-collisions (boolean) default: true — Reposition to stay inside the viewport and scroll containers
    - translucent (boolean) default: false — Translucent, blurred surface
    - auto-focus (boolean) default: true — Move focus into the panel when it opens (hover popovers never take focus)
    - class (string) — Applied to the panel
    - default slot ({ close, shake }) — Panel content; receives the controller functions
Examples: Overview, Sizing the popover, Open on hover, Using the controller

## Progress
A horizontal bar that shows task completion, with determinate and indeterminate modes, labelled layouts, and smooth value transitions.
Import: import { Progress } from "@plexui/vue/components/Progress"
Docs: https://plexui.com/vue/components/progress
Props:
  - value (number | null) default: null — Current progress between 0 and max. Pass null for indeterminate.
  - max (number) default: 100 — Maximum progress value
  - get-value-label ((value: number, max: number) => string) — Accessible value text (aria-valuetext). Defaults to the rounded percentage, e.g. "67%".
  - class (string) — Applied to the root <div>
Examples: Overview, With label, Controlled

## Progress Steps
Stepper for multi-step flows like checkouts and onboarding, with horizontal or vertical layout, icons, navigation, and color tokens.
Import: import { ProgressSteps, ProgressStepsStep, ProgressStepsTitle, ProgressStepsDescription } from "@plexui/vue/components/ProgressSteps"
Docs: https://plexui.com/vue/components/progress-steps
Props:
  - current (number) — Required. Current active step (1-based)
  - orientation ("horizontal" | "vertical") default: "horizontal" — Layout direction
  - size ("sm" | "md" | "lg") default: "md" — Step indicator size
  - color ("default" | "success") default: "default" — Color scheme for completed/active steps
  - connector-style ("solid" | "dashed") default: "solid" — Connector line style
  - variant ("default" | "minimal") default: "default" — "minimal" renders a compact bar (requires total)
  - total (number) — Total steps for minimal variant
  - class (string) — Class applied to the container
  ProgressStepsStep:
    - icon (Component | VNode | string) — Custom icon instead of step number; the icon slot takes precedence
Examples: Overview, Sizes, Vertical, With Icons, With Navigation, Minimal, Icons Only, Colors

## Radio Group
Radio group for single-choice selection with row or column layout, right-aligned indicators, rich item content, and card-style options.
Import: import { RadioGroup, RadioGroupItem } from "@plexui/vue/components/RadioGroup"
Docs: https://plexui.com/vue/components/radio-group
Props:
  - value (string) — Selected value. Bind with v-model:value; leave unset for an uncontrolled group
  - default-value (string) — Initial selected value (uncontrolled)
  - direction ("col" | "row") default: "row" — Item flow direction
  - disabled (boolean) default: false — Disable the whole group
  - name (string) — Name of the hidden radio inputs submitted with the owning form
  - required (boolean) default: false — Marks the group and every hidden radio input as required
  - aria-label (string) — Accessible group label
  - class (string) — Extra classes on the group element
  - default slot (VNode[]) — RadioGroupItem children
  - @update:value ((value: string) => void) — Emitted when the selected option changes; powers v-model:value
  - @change ((value: string) => void) — Emitted with update:value, named after the React onChange prop
  RadioGroupItem:
    - value (string) — Item value
    - disabled (boolean) default: false — Disable this item only
    - required (boolean) — Marks this item as required
    - block (boolean) default: false — Stretch item to fill available width
    - orientation ("left" | "right") default: "left" — Position of the radio indicator relative to the label
    - description (string) — Second line below the option's label, linked via aria-describedby (or the description slot)
    - class (string) — Extra classes on the label element
    - default slot (VNode[]) — Label content (text or rich content)
Examples: Overview, With Checkbox, Descriptions, Direction, Orientation, Group disabled, Item disabled, With description, With Field, With Field error, Choice card, Card selection, Grouped sections

## Select
Select dropdown with grouped options, per-item descriptions, multiple selection, action items, and column-based layouts.
Import: import { Select } from "@plexui/vue/components/Select"
Docs: https://plexui.com/vue/components/select
Props:
  - options (Options<T>) — Array of options or grouped options
  - v-model:value (string | string[]) — Selected value (single) or values (multiple)
  - @change ((option | options) => void) — Called when selection changes, with the selected option (or options with multiple)
  - multiple (boolean) default: false — Allow multiple selection. value, @change and @update:value are typed by it
  - placeholder (string) default: "Select..." — Trigger placeholder
  - variant ("soft" | "outline" | "ghost") default: "outline" — Trigger variant
  - size (ControlSize) default: "md" — Trigger size (3xs to 3xl)
  - pill (boolean) default: false — Rounded trigger
  - clearable (boolean) default: false — Show clear button
  - block (boolean) default: variant !== "ghost" — Full width trigger
  - disabled (boolean) default: false — Disable select. A disabled select is not submitted or validated with its form
  - loading (boolean) default: false — Loading state; shows loading-placeholder and keeps the menu closed
  - loading-placeholder (string) default: "Loading..." — Trigger text while loading
  - name (string) — Name of the hidden form input. With multiple, every selected value is submitted
  - required (boolean) — Required for native form validation
  - id (string) — Id of the hidden form input
  - actions (array) — Actions below options list
  - check-position ("start" | "end" | "none") default: "start" — Where the check indicator sits in the list. "none" removes the indicator column for lists that never carry a selection
  - #optionView / OptionView (slot (option) | Component) — Custom option render
  - #triggerView / TriggerView (slot | Component) — Custom trigger render: the selected option, or { values, selectedAll } with multiple
  - TriggerStartIcon (Component) — Icon at the start of the trigger
  - #trigger / trigger (slot ({ open, onToggle }) | function) — Custom trigger element, wrapped as the popover trigger
  - dropdown-icon-type ("chevronDown" | "dropdown" | "none") default: "dropdown" — Indicator at the end of the trigger
  - side ("top" | "bottom") default: "bottom" — Preferred side of the list
  - align ("start" | "center" | "end") default: "center" when block, otherwise "start" — Alignment of the list against the trigger
  - list-width (number | "auto") default: "auto" — Width of the list in px
  - list-min-width (number | "auto") default: trigger width (300 when not block) — Minimum width of the list in px
  - list-max-width (number | "auto") default: "auto" — Maximum width of the list in px
  - search-placeholder (string) — Search input placeholder
  - search-aria-label (string) default: "Search options" — Accessible name of the search input, independent of the trigger label
  - #searchEmptyMessage / search-empty-message (slot | string) default: "No results found." — Shown when the search matches nothing
  - search-size (ControlSize) default: "md" — Size of the search input in the menu, such as 2xl for 44px touch targets on phones
  - search-predicate ((option, term) => boolean) — Filters options while searching
  - aria-label / aria-labelledby (string) — Accessible name of the trigger and the list
Examples: Overview, With descriptions, Actions, Grouped options, Multiple selection, Column configuration

## Select Control
Select control primitive for building custom dropdowns, with variants, sizing, start and dropdown icons, and clearable, loading, and invalid states.
Import: import { SelectControl } from "@plexui/vue/components/SelectControl"
Docs: https://plexui.com/vue/components/select-control
Props:
  - selected (boolean) default: false — Whether a value is selected (affects placeholder styling)
  - variant ("soft" | "outline" | "ghost") default: "outline" — Visual variant
  - size (ControlSize) default: "md" — Control size (3xs to 3xl)
  - pill (boolean) default: false — Fully rounded trigger
  - StartIcon (Component) — Icon at start
  - @clear-click (() => void) — Enables the clear button when set (a function prop, onClearClick)
  - @interact (() => void) — Called on pointer down, ArrowDown, ArrowUp and Space (a function prop, onInteract). Without it, a wrapping trigger opens on pointer down
  - dropdown-icon-type ("chevronDown" | "dropdown" | "none") default: "dropdown" — Dropdown indicator style
  - invalid (boolean) default: false — Invalid state
  - disabled (boolean) default: false — Disable control
  - block (boolean) default: false — Full width
  - loading (boolean) default: false — Loading state (aria-busy); hides the indicators and ignores interaction
  - optically-align ("start" | "end") — Optical alignment
  - class (string) — Applied to the control
Examples: Overview, Variants, Sizing & roundness, Selected, Start icon, Dropdown icon, Clearable, Loading, Invalid, Disabled, Block, Country selector, Country code selector, Phone form, Optical alignment

## Separator
A thin divider between content, horizontal or vertical, decorative by default or exposed to assistive technology when it marks a real grouping.
Import: import { Separator } from "@plexui/vue/components/Separator"
Docs: https://plexui.com/vue/components/separator
Props:
  - orientation ("horizontal" | "vertical") default: "horizontal" — Direction of the divider
  - decorative (boolean) default: true — When true, the separator is ignored by assistive technologies. Set false when the divider carries semantic grouping (renders role="separator").
  - class (string) — Applied to the root <div>
Examples: Overview, Vertical, Menu, List

## Shimmer Text
Text with a shimmer animation for loading and in-progress states, always on or toggled with a graceful stop.
Import: import { ShimmerText, ShimmerableText } from "@plexui/vue/components/ShimmerText"
Docs: https://plexui.com/vue/components/shimmer-text
Props:
  - as ("p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div") default: "div" — HTML element to render
  - default slot (VNode[]) — Text content to shimmer
  - class (string) — Additional CSS classes
  ShimmerableText:
    - as ("p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div") default: "div" — HTML element to render
    - shimmer (boolean) default: false — Whether the shimmer animation is active
    - default slot (VNode[]) — Text content to shimmer
    - class (string) — Additional CSS classes
Examples: Overview, Semantic elements, Controllable shimmer

## Sidebar
Composable navigation sidebar for app shells with collapsible sections, search and filter, tree views with hover actions, and a mobile menu
Import: import { SidebarProvider, SidebarLayout, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@plexui/vue/components/Sidebar"
Docs: https://plexui.com/vue/components/sidebar
Props:
  - variant ("sidebar" | "docs") default: "sidebar" — Visual variant
  - side ("left" | "right") default: "left" — Which side the sidebar is on
  SidebarProvider:
    - collapsible ("offcanvas" | "icon" | "none") default: "offcanvas" — Collapse behavior: offcanvas (drawer on mobile, full collapse on desktop), icon (icon rail), or none
    - default-open (boolean) default: true — Initial open state (uncontrolled)
    - open (boolean) — Controlled open state. Bind with v-model:open
    - @update:open ((open: boolean) => void) — Emitted when the open state changes; powers v-model:open. Without open the provider keeps its own state and still emits
    - class (string) — Class of the provider's wrapper
    - style (StyleValue) — Style of the provider's wrapper, e.g. --sidebar-width
    - default slot ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, collapsible, toggleSidebar }) — Receives the sidebar context, the object useSidebar() returns
  SidebarGroup:
    - default-open (boolean) default: true — Whether the group is open initially. A closed group hides its SidebarGroupContent
    - open (boolean) — Controlled open state, also exposed as data-state. The group has no toggle of its own: change open from your own control
  SidebarGroupLabel:
    - size ("sm" | "lg") default: "lg" — sm: compact, tertiary. lg: larger, primary, more spacing
    - as-child (boolean) default: false — Render the single child element as the label
  SidebarMenuItem:
    - expanded (boolean) — Marks the item expanded, which turns its SidebarMenuChevron. Pair it with open on its SidebarMenuSub
  SidebarMenuButton:
    - is-active (boolean) default: false — Highlight the current page (aria-current="page")
    - tooltip (string) — Label shown on hover when collapsed (icon mode). Hidden on mobile. The tooltip slot takes rich content
    - as-child (boolean) default: false — Render the single child element (e.g. a RouterLink) as the button. The button attributes go on the child and its content is wrapped like the button's
  SidebarMenuSub:
    - open (boolean) default: true — Whether submenu is expanded. A closed submenu is inert, so its links and buttons leave the tab order and the accessibility tree
    - has-icons (boolean) default: false — Align child items with parent text that has icons
  SidebarMenuSubButton:
    - is-active (boolean) default: false — Highlight the current page (aria-current="page")
    - indent (0 | 1 | 2 | 3) default: 0 — Nesting level; each level adds 12px of left margin
    - as-child (boolean) default: false — Render the single child element (e.g. a RouterLink) as the button
  SidebarCard:
    - variant ("default" | "elevated") default: "default" — Visual variant
    - dismissible (boolean) default: false — Shows dismiss button
    - @dismiss ((event: MouseEvent) => void) — Emitted when the dismiss button is clicked
Examples: App Shell, Basic, Collapsible Sections, Search and Filter, Tree with Hover Actions, Mobile Menu, Search Input

## Skeleton
Loading placeholders that match the shape of the content they stand in for, from avatars and text to cards, forms, and tables.
Import: import { Skeleton } from "@plexui/vue/components/Skeleton"
Docs: https://plexui.com/vue/components/skeleton
Props:
  - circle (boolean) default: false — Render a circular skeleton
  - class (string) — Set dimensions and custom styling
Examples: Overview, Card, Text, Form, Table

## Slider
Slider for fine-tuning numeric values with single or range thumbs, marks, an editable value input, and vertical orientation.
Import: import { Slider } from "@plexui/vue/components/Slider"
Docs: https://plexui.com/vue/components/slider
Props:
  - value (number | number[]) — Required. Current value; an array when range is set. Bind with v-model:value
  - min (number) — Required. Minimum value
  - max (number) — Required. Maximum value
  - step (number) — Required. Step increment
  - range (boolean) default: false — Enable multi-thumb range mode
  - orientation ("horizontal" | "vertical") default: "horizontal" — Layout direction of the slider
  - reset-value (number) — Value for the reset option (single mode only)
  - reset-tooltip (string) default: "Reset to default" — Tooltip and accessible name of the reset button (single mode only)
  - unit (string) — Unit displayed after the value (e.g. ms, px)
  - prefix-unit (string) — Unit displayed before the value (e.g. $)
  - label (string) — Label text. Also names the slider thumbs for assistive technology
  - label slot (VNode[]) — Rich label content (e.g. a tooltip); takes precedence over the label prop
  - aria-label (string) — Accessible name when there is no visible label. Range thumbs add Minimum / Maximum (or Value n of m)
  - aria-labelledby (string) — Id of an element that names the slider; takes precedence over label
  - marks (Array<{ value: number, label: string }>) — Marks below the track (horizontal only)
  - track-color (string) — Color of the slider track
  - range-color (string) — Color of the filled part of the track
  - min-steps-between-thumbs (number) — Minimum steps between thumbs (range mode only)
  - disabled (boolean) default: false — Disable the slider
  - class (string) — Extra classes on the wrapper element
  - @update:value ((value: number | number[]) => void) — Emitted when the value changes; an array when range is set; powers v-model:value
  - @change ((value: number | number[]) => void) — Emitted with update:value, named after the React onChange prop
  - @focus ((event: FocusEvent) => void) — Emitted when the value input or a thumb gains focus
  - @blur ((event: FocusEvent) => void) — Emitted when the value input or a thumb loses focus
Examples: Overview, Adding a tooltip, Marks, Range, Multiple thumbs, Vertical, Disabled

## Stat Card
Stat card for dashboards displaying KPIs with trend deltas, an info tooltip, an icon, a progress bar, and accent border styling.
Import: import { StatCard } from "@plexui/vue/components/StatCard"
Docs: https://plexui.com/vue/components/stat-card
Props:
  - label (string) — Required. Label describing the metric
  - value (string | number) — The primary metric value
  - value slot (VNode[]) — Rich value content; takes precedence over the value prop
  - description (string) — Subtitle below the value
  - trend ({ value: number; label?: string }) — Trend indicator with percentage
  - invert-trend (boolean) default: false — Invert trend colors (positive = bad)
  - trend-position ("value" | "header") default: "value" — Where the trend indicator is rendered
  - trend-variant ("text" | "badge") default: "text" — Render trend as text or badge
  - size ("default" | "sm") default: "default" — Card size; sm for compact analytics layouts
  - icon slot (VNode[]) — Icon displayed on the left with a soft background
  - sparkline slot (VNode[]) — Chart rendered at the bottom
  - progress (number) — Progress bar value (0-100)
  - progress-label (string) — Label next to progress bar
  - tooltip (string) — Shows an info icon next to the label with tooltip text
  - variant ("default" | "accent") default: "default" — Visual variant
  - accent-color ("primary" | "secondary" | "danger" | "info" | "discovery" | "success" | "caution" | "warning") default: "primary" — Left border color (accent variant)
  - class (string) — Extra classes on the card element
Examples: Overview, Sizes, Trend position, Trend variant, Info tooltip, With icon, With progress, Accent border, Inverted trend

## Switch
Toggle switch for turning settings on or off, with an optional label, a supporting description linked for screen readers, and a configurable label position.
Import: import { Switch } from "@plexui/vue/components/Switch"
Docs: https://plexui.com/vue/components/switch
Props:
  - checked / v-model:checked (boolean) — Controlled state
  - default-checked (boolean) — Initial state (uncontrolled)
  - label (string) — Accessible label rendered next to the switch
  - label slot (VNode[]) — Rich label content; takes precedence over the label prop
  - description (string) — Secondary text below the label, linked via aria-describedby
  - description slot (VNode[]) — Rich description content; takes precedence over the description prop
  - label-position ("start" | "end") default: "end" — Label on the left (start) or right (end)
  - disabled (boolean) default: false — Prevent interaction
  - required (boolean) — Required for form submission
  - name (string) — Form field name
  - value (string) default: "on" — Value when submitted
  - class (string) — CSS classes applied to the wrapper node
  - id (string) — The id of the switch element (generated when omitted)
  - @update:checked ((next: boolean) => void) — Emitted with the next state when toggled
  - @focus ((event: FocusEvent) => void) — Emitted when the switch gains focus
  - @blur ((event: FocusEvent) => void) — Emitted when the switch loses focus
Examples: Overview, With label, With description, Label position, Label position with description, Default checked, Controlled, Disabled, Disabled with label, Disabled with description, With Field, With Field and description, Settings panel, Grouped sections

## Table
Styled table primitives for structured data, with header, body, footer, row, cell and caption parts on native table elements.
Import: import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@plexui/vue/components/Table"
Import: import { DataTable, DataTableColumnHeader } from "@plexui/vue/components/DataTable"
Docs: https://plexui.com/vue/components/table
  Table Primitives:
    - Table (table) — Root table container with horizontal scroll wrapper; attributes go to the <table>
    - TableHeader (thead) — Table header group
    - TableBody (tbody) — Table body group
    - TableFooter (tfoot) — Table footer group
    - TableRow (tr) — Table row
    - TableHead (th) — Table header cell
    - TableCell (td) — Table data cell
    - TableCaption (caption) — Table caption
  DataTable:
    - columns (ColumnDef<TData>[]) — Column definitions following TanStack Table v8 API; header and cell renderers return VNodes (required)
    - data (TData[]) — Data array to display (required)
    - variant ("default" | "bordered") default: "default" — Visual variant: bordered adds a rounded border and tinted header
    - page-size (number) default: 10 — Rows per page. Set 0 or Infinity to disable pagination. The rows-per-page select offers 10, 20, 50, 100 and this size
    - initial-sorting (SortingState) — Initial column sorting state
    - global-filter (string) — Controlled search/filter string. Bind with v-model:global-filter
    - column-visibility (VisibilityState) — Controlled column visibility state. Bind with v-model:column-visibility
    - enable-row-selection (boolean) default: false — Adds a first column (id select) with a checkbox per row and a header checkbox that selects every row on all pages, mixed when some are selected. A click on a checkbox is not a row click
    - row-selection (RowSelectionState) — Controlled row selection state. Bind with v-model:row-selection
    - get-row-id ((row: TData) => string) — Custom row ID accessor; selection keys use it
    - empty-message (string | number | VNode) default: "No results." — Shown when no rows; the emptyMessage slot takes precedence
    - show-pagination (boolean) default: true — Whether to show pagination controls. They hide on their own when every row fits on one page
    - class (string) — Class applied to outermost wrapper
    - emptyMessage slot (VNode[]) — Rich content shown when no rows
    - @row-click ((row: TData) => void) — Click handler for rows. Makes rows interactive: they take Tab and call it on Enter or Space
    - @update:global-filter ((value: string) => void) — Emitted with the next filter when the table changes it; powers v-model:global-filter
    - @update:column-visibility ((visibility: VisibilityState) => void) — Emitted with the next visibility; powers v-model:column-visibility
    - @update:row-selection ((selection: RowSelectionState) => void) — Emitted with the next selection; powers v-model:row-selection
  DataTableColumnHeader:
    - column (Column<TData, TValue>) — TanStack Table column object (required)
    - title (string) — Display text for the header (required)
    - class (string) — Class applied to the header button (or text when the column cannot sort)
  Column helpers:
    - idCell(accessor) (CellComponent) — Monospace ID with copy-on-click tooltip
    - dateTimeCell(accessor, options?) (CellComponent) — Formatted datetime with Intl.DateTimeFormat
    - statusCell(accessor, colorMap?) (CellComponent) — Badge cell with automatic status-to-color mapping
    - tooltipHeader(label, description) (HeaderComponent) — Header with dashed underline and info tooltip
Examples: Overview, With footer, Minimal, Variant, Sorting, Pagination, Row click, Row selection, Cell variants, Filtering, Column visibility, Empty state

## Tabs
Switch between grouped views with segmented or underline tabs, icon-only triggers, and badge counts on each tab.
Import: import { Tabs, TabsTab } from "@plexui/vue/components/Tabs"
Docs: https://plexui.com/vue/components/tabs
Props:
  - value (string) — Selected tab value. Bind with v-model:value; leave unset for an uncontrolled group
  - variant ("segmented" | "underline") default: "segmented" — Visual style: segmented (background highlight) or underline (line indicator)
  - orientation ("horizontal" | "vertical") default: "horizontal" — Layout direction of the tab group
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Control height (3xs through 3xl)
  - gutter-size ("2xs" | "xs" | "sm" | "md" | "lg" | "xl") — Horizontal padding of tabs
  - pill (boolean) default: true — Fully rounded control (segmented variant only)
  - flush (boolean) default: false — Text-width indicator, no border, gap spacing (underline variant only)
  - block (boolean) default: false — Full-width control with equal-width tabs
  - disabled (boolean) default: false — Disable all tabs
  - aria-label (string) — Accessible name (required)
  - overflow ("scroll" | "menu") default: "scroll" — Tabs that do not fit: scroll sideways, or move into a menu at the end (horizontal, not block)
  - overflow-label (string) default: "More" — Text of the menu button with overflow="menu"
  - class (string) — Extra classes on the group element
  - default slot (VNode[]) — TabsTab children
  - @update:value ((value: string) => void) — Emitted when a tab is selected; powers v-model:value
  - @change ((value: string) => void) — Emitted with update:value, named after the React onChange prop
  - @click ((event: MouseEvent) => void) — Emitted on any click in the group, even when the selection does not change
  TabsTab:
    - value (string) — Tab value (required)
    - disabled (boolean) — Disable this tab
    - icon (Component | VNode | string) — Icon before the label (sized automatically); the icon slot takes precedence
    - badge (number | string | VNode | { content; color?; variant?; pill?; loading? }) — Badge/count or custom badge config
    - aria-label (string) — Accessible name (required for icon-only tabs)
    - default slot (VNode[]) — Tab label
    - icon slot (VNode[]) — Icon before the label
    - badge slot (VNode[]) — Badge content; styling still comes from the badge object
Examples: Overview, Segmented with icons, Icon only, Segmented with badge, Underline, Underline flush, Underline block, Underline with icons, Underline with badge, Vertical segmented, Vertical underline, Vertical underline with icons, Disabled tab, Sizing, Scrollable, Overflow menu

## Tag Input
Input for entering multiple unique values as chip-style tokens, with suggestions and keyboard editing.
Import: import { TagInput } from "@plexui/vue/components/TagInput"
Docs: https://plexui.com/vue/components/tag-input
Props:
  - value / v-model:value (Tag[]) — Controlled value; update:value fires on every change
  - default-value (Tag[]) — Uncontrolled initial tags
  - @change ((tags: Tag[]) => void) — Fires when the tags change
  - id (string) — Id of the text input, so a label can target it with for
  - placeholder (string) — Input placeholder
  - validator ((value: string) => boolean) — Validates each tag when it is created; invalid tags shown in red
  - max-tags (number) — Maximum number of tags. At the limit the text input hides and a count shows below; the container then takes the tab stop, so arrow keys and Backspace still select and remove tags
  - rows (number) default: 1 — Min rows
  - size ('sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl') default: xl — Control height when rows=1; matches Input height of the same size
  - pill (boolean) default: false — Fully-rounded container and chips; matches Input/SelectControl pill
  - delimiters (string[]) default: [",", " "] — Characters that commit the current text as a tag
  - disabled (boolean) — Disables the input: tags cannot be added or removed, and pending text stays as typed
  - auto-focus (boolean) default: false — Focus on mount
Examples: Overview, Inline filter row, Suggestions

## Text Link
Text link for inline internal and external links with router integration, color inheritance, underline control, and weight options.
Import: import { TextLink } from "@plexui/vue/components/TextLink"
Docs: https://plexui.com/vue/components/text-link
Props:
  - default slot (VNode[]) — Link content
  - href (string) — URL. An http:// or https:// URL is external
  - to (string | Record<string, unknown>) — Router link destination (internal), such as a vue-router location
  - primary (boolean) default: false — Primary color, no default underline
  - underline (boolean) default: true — Underline (default true unless primary)
  - force-external (boolean) — Force external link behavior
  - as (Component) — Link component (e.g. RouterLink, NuxtLink)
  - target (string) — Where to open the link. External links default to _blank
  - class (string) — Extra classes on the link
Examples: Overview, Inline usage, Default inheritance, Primary color, Underline, External links, Font weight

## Textarea
Multi-line text input that can grow with its content, with a size scale, autofill extension control, and invalid state styling.
Import: import { Textarea } from "@plexui/vue/components/Textarea"
Docs: https://plexui.com/vue/components/textarea
Props:
  - value / v-model:value (string | number) — Controlled value; uncontrolled when omitted
  - default-value (string | number) — Initial value when uncontrolled
  - variant ("outline" | "soft") default: "outline" — Visual style of the textarea
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Control height for single-line equivalent
  - gutter-size ("2xs" | "xs" | "sm" | "md" | "lg" | "xl") — Horizontal padding; defaults from size
  - disabled (boolean) default: false — Disable the textarea
  - read-only (boolean) default: false — Make the textarea read-only (the native readonly attribute works too)
  - invalid (boolean) default: false — Mark as invalid
  - allow-autofill-extensions (boolean) default: !!name — Allow autofill extensions
  - auto-select (boolean) default: false — Select all contents when mounted
  - rows (number) default: 3 — Initial row count
  - auto-resize (boolean) default: false — Grow/shrink with content
  - max-rows (number) — Max rows when auto-resize; defaults to the larger of rows and 10
  - class (string) — Applied to the container <div>
  - @update:value ((value: string) => void) — Emitted on every input
  - @autofill (() => void) — Emitted when the browser autofills the textarea
Examples: Overview, Variants, Auto resize, Sizing, Disabled, Invalid, Auto select text, Autofill extensions

## Toast
Toast notifications for transient feedback, with semantic variants, descriptions, action buttons, promise integration, and persistent toasts.
Import: import { Toaster, toast } from "@plexui/vue/components/Toast"
Docs: https://plexui.com/vue/components/toast
  Toaster:
    - position ("top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right") default: "top-center" — Where toasts anchor on the viewport
    - duration (number) default: 3000 — Default auto-dismiss duration in ms
    - offset (string | number | { top?; right?; bottom?; left? }) — Distance from the viewport edge
    - gap (number) — Gap between stacked toasts in px
Examples: Overview, Variants, Description, Action, Promise, Long content, Compact, Persistent

## Tooltip
Brief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.
Import: import { Tooltip, TooltipTriggerDecorator } from "@plexui/vue/components/Tooltip"
Docs: https://plexui.com/vue/components/tooltip
Props:
  - default slot (VNode) — The trigger: a single element. Wrap plain text in TooltipTriggerDecorator
  - content (string | number | VNode | null) — Tooltip content, or the #content slot (null = no tooltip)
  - compact (boolean) default: false — Short 1-3 word tooltips, inverse styling
  - interactive (boolean) default: false — Content is interactive, stays open when hovered
  - max-width (number | "none") default: 300 — Max width of tooltip
  - open-delay (number) default: 150 — Delay before showing (ms)
  - side ("top" | "right" | "bottom" | "left") default: "top" — Preferred side
  - side-offset (number) default: 5 — Distance from trigger
  - align ("start" | "center" | "end") default: "center" — Alignment
  - align-offset (number) default: 0 — Alignment offset
  - gutter-size ("sm" | "md" | "lg") default: "md" — Content padding
  - content-class-name (string) — Class for tooltip content
  - force-open (boolean) — Force open or closed
  - prevent-unintentional-click-to-close (boolean) default: false — Keeps the tooltip open when the trigger is clicked right after it opened
  - content slot (VNode[]) — Rich tooltip content; takes precedence over content
Examples: Overview, Different triggers, Conditionally enabled, Compact tooltips