# PlexUI
> The most flexible UI kit for React. Production-grade components with pixel-perfect Figma parity.

Install: npm install @plexui/ui
Docs: https://plexui.com
Components: 41

## Setup

```css
@import "tailwindcss";
@import "@plexui/ui/css";
```

Wrap your app with <PlexUIProvider> from "@plexui/ui/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

---

## Alert
Call attention to a specific message or warning
Import: import { Alert } from "@plexui/ui/components/Alert"
Docs: https://plexui.com/docs/components/alert
Props:
  - title (ReactNode) — Title displayed in the alert
  - description (ReactNode) — Description text
  - actions (ReactNode) — Actions (for example buttons)
  - actionsPlacement ("end" | "bottom") — Placement of actions
  - color (SemanticColors) default: "primary" — Color scheme
  - variant ("solid" | "soft" | "outline") default: "outline" — Style variant
  - indicator (ReactNode | false) — Custom indicator or false to hide
  - onDismiss (() => void) — Shows dismiss button when provided
Examples: Overview, Colors & variants, Title, Description, Actions, Action placement, Indicator, Dismissible

## Avatar Group
Display avatars as a single stack
Import: import { AvatarGroup } from "@plexui/ui/components/Avatar"
Docs: https://plexui.com/docs/components/avatar-group
Props:
  - size (number) — Size of all avatars in the group
  - stack ("start" | "end") default: "start" — Stacking direction
Examples: Overview, Stacking direction, Group sizing

## Avatar
Display user identities with either text, photo, or an icon
Import: import { Avatar } from "@plexui/ui/components/Avatar"
Docs: https://plexui.com/docs/components/avatar
Props:
  - name (string) — Display name; used for text initial when no image/icon
  - imageUrl (string) — Absolute URL for image avatar
  - Icon (React.ComponentType) — Icon component for icon avatar
  - size (number) — Width and height in pixels
  - color (string) — Semantic color for text/icon avatar
  - variant ("soft" | "solid") — Style variant
  - overflowCount (number) — Show overflow count (e.g. +9)
  - onClick (function) — Makes avatar interactive
Examples: Overview, Text, Image, Icon, Overflow count, Sizing, Colors & variants, Roundness, Interactive

## Badge
Emphasize details with a status indicator
Import: import { Badge } from "@plexui/ui/components/Badge"
Docs: https://plexui.com/docs/components/badge
Props:
  - children (ReactNode) — 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
Examples: Overview, Colors & variants, Size & roundness, Icon, Loading

## Button Link
"Button as a semantic anchor element"
Import: import { ButtonLink } from "@plexui/ui/components/Button"
Docs: https://plexui.com/docs/components/button-link
Props:
  - children (ReactNode) — 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
  - gutterSize ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl") — Override horizontal padding
  - iconSize ("sm" | "md" | "lg" | "xl" | "2xl") — Override icon size
  - href (string) — Link URL
  - to (string | object) — Router link destination (internal)
  - as (ComponentType) — Link component override (e.g. Next Link)
  - external (boolean) — Force external-link behavior
  - opticallyAlign ("start" | "end") — Apply optical negative margin alignment
  - block (boolean) default: false — Full width
  - pill (boolean) default: true — Fully rounded
  - disabled (boolean) default: false — Disable link
  - disabledTone ("relaxed") — Use relaxed visual tone for disabled state
  - className (string) — Custom classes for the root element
Examples: Overview, Internal link, External link, Colors & variants, Sizing & roundness, Icons, Block, Disabled

## Button
Create actions in many different styles
Import: import { Button } from "@plexui/ui/components/Button"
Docs: https://plexui.com/docs/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: true — 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
  - loading (boolean) default: false — Shows loading indicator
  - inert (boolean) default: false — Accessibly disabled without visual change
  - selected (boolean) default: false — Selected state styling
  - opticallyAlign ("start" | "end") — Offset gutter for optical alignment
  - gutterSize (string) — Horizontal padding size
  - iconSize (string) — Size of icons in children
Examples: Overview, Colors & variants, Sizing & roundness, Icons, Block, Disabled, Inert, Loading, Selected, Optical alignment

## Checkbox
Toggle control for on and off states
Import: import { Checkbox } from "@plexui/ui/components/Checkbox"
Docs: https://plexui.com/docs/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 (boolean | "indeterminate") — Controlled state
  - defaultChecked (boolean | "indeterminate") — Initial state (uncontrolled)
  - onCheckedChange ((next: boolean) => void) — Called when state changes
  - label (ReactNode) — Accessible label — accepts ReactNode for rich content
  - disabled (boolean) default: false — Prevent interaction
  - required (boolean) — Required for form submission
  - name (string) — Form field name
  - value (string) — Value when submitted
  - orientation ("left" | "right") default: "left" — Label position relative to checkbox
  - className (string) — CSS classes applied to wrapper node
  - id (string) — The id of the checkbox element
Examples: With Radio Group, Descriptions, Overview, Variants, Pill, Ghost, With description, Indeterminate, Disabled, Label orientation, Without label, Group with select all, Group with description, With Field, Grouped sections

## Code Block
Display syntax-highlighted code snippets
Import: import { CodeBlock } from "@plexui/ui/components/CodeBlock"
Docs: https://plexui.com/docs/components/code-block
  CodeBlock:
    - children (string) — Code content
    - language (string) — Prism language name
    - className (string) — Additional wrapper class
  CollapsibleCodeBlock:
    - children (string) — Code content
    - language (string) — Prism language name
    - defaultExpanded (boolean) default: false — Start expanded
    - collapsedHeight (number) default: 80 — Height when collapsed (px)
    - maxExpandedHeight (number) — Max height when expanded (px)
    - copyable (boolean) default: true — Show copy button
Examples: Overview, Collapsible, Collapsible — expanded by default, Collapsible — custom height, Collapsible — max expanded height, Collapsible — without copy button, Supported languages

## Copy Tooltip
Allow users to easily copy to clipboard
Import: import { CopyTooltip } from "@plexui/ui/components/Tooltip"
Docs: https://plexui.com/docs/components/copy-tooltip
Props:
  - children (ReactNode) — Trigger element (for example Tooltip.TriggerDecorator)
  - copyValue (string) default: "Very cool content to copy" — Content to copy to clipboard
  - openDelay (number) default: 150 — Tooltip open delay in milliseconds
  - align ("start" | "center" | "end") default: "center" — Preferred tooltip alignment against the trigger
  - alignOffset (number) default: 0 — Offset from start/end alignment in pixels
  - side ("top" | "right" | "bottom" | "left") default: "top" — Preferred side of the trigger
  - sideOffset (number) default: 5 — Distance from trigger in pixels
Examples: Overview

## Date Input
Masked text input for typing dates with automatic formatting and validation
Import: import { DateInput } from "@plexui/ui/components/DateInput"
Docs: https://plexui.com/docs/components/date-input
Props:
  - value (DateTime | null) — Selected date (Luxon DateTime)
  - onChange ((date: DateTime | null) => void) — Called when a complete valid date is entered or the field is cleared
  - 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
  - timeMode (MaskitoTimeMode) — Enable time input: HH:MM, HH:MM:SS, etc.
  - dateTimeSeparator (string) default: ", " — Separator between date and time parts
  - timeStep (number) default: 0 — Arrow-key increment step for time (ms)
  - 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–3xl)
  - variant ("outline" | "soft") default: "outline" — Visual style
  - disabled (boolean) default: false — Disable input
  - invalid (boolean) default: false — Mark as invalid
  - placeholder (string) — Auto-generated from format if not set
Examples: Overview, With time, With seconds, Limits, US format, ISO format, With Field, Validation, Disabled

## Date Picker
Select a single date with an interactive calendar
Import: import { DatePicker } from "@plexui/ui/components/DatePicker"
Docs: https://plexui.com/docs/components/date-picker
Props:
  - value (DateTime | null) — Selected date (luxon)
  - onChange ((date: DateTime | null) => void) — Called when date changes
  - min (DateTime) — Minimum selectable date
  - max (DateTime) — Maximum selectable date
  - captionLayout ("buttons" | "dropdown") default: "buttons" — Calendar header mode. Use dropdown for date of birth
  - showTime (boolean) default: false — Show time input below calendar
  - yearRange ([number, number]) — Min/max years for dropdown caption
  - size (string) — Trigger size
  - pill (boolean) — Rounded trigger
  - clearable (boolean) — Show clear button
  - triggerShowIcon (boolean) default: true — Show calendar icon
  - triggerDateFormat (string) default: "MM/dd/yy" — Date format in trigger. Auto-includes time when showTime is enabled
  - placeholder (string) — Trigger placeholder
  - disabled (boolean) — Disable picker
Examples: Overview, Limits, Date of birth, Time picker, Dropdown + time, Two fields, Date input, DateTime input, Without Icon, Disabled

## Date Range Picker
Select a date range with an interactive calendar
Import: import { DateRangePicker } from "@plexui/ui/components/DateRangePicker"
Docs: https://plexui.com/docs/components/date-range-picker
Props:
  - value (DateRange | null) — Selected range ([start, end], inclusive)
  - onChange ((next: DateRange | null, shortcut?: DateRangeShortcut) => void) — Called when range changes
  - min (DateTime) — Earliest selectable date
  - max (DateTime) — Latest selectable date
  - maxRangeDays (number) — Max length of range in days (inclusive)
  - shortcuts (DateRangeShortcut[]) — Quick selection shortcuts
  - side ("top" | "right" | "bottom" | "left") default: "bottom" — Preferred side for popover
  - sideOffset (number) default: 8 — Distance from trigger in pixels
  - align ("start" | "center" | "end") default: "center" — Preferred popover alignment
  - alignOffset (number) default: 0 — 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
  - dropdownIconType ("chevronDown" | "dropdown" | "none") default: "dropdown" — Icon shown at trigger end
  - triggerClassName (string) — Custom class for trigger
  - triggerShowIcon (boolean) default: true — Show calendar icon at trigger start
  - triggerStepperUnit ("month") — Enable month stepper mode in trigger
  - triggerDateFormat (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 overlay for confirmations, forms, and alerts
Import: import { Dialog } from "@plexui/ui/components/Dialog"
Docs: https://plexui.com/docs/components/dialog
Props:
  - open (boolean) — Controlled open state
  - onOpenChange ((open: boolean) => void) — Called when the dialog opens or closes
  - width (number | string) default: 480 — Panel width
  - showClose (boolean) default: true — Show close button in top-right corner
  - className (string) — Additional CSS class on the panel
Examples: Overview, Destructive confirmation

## Empty Message
Gracefully inform users when there's nothing to see
Import: import { EmptyMessage } from "@plexui/ui/components/EmptyMessage"
Docs: https://plexui.com/docs/components/empty-message
Props:
  - color (string) — Semantic color (e.g. danger, warning)
  - size ("sm" | "md" | "lg") — Icon size
  - className (string) — Additional classes for the action row container
Examples: Composition, Error message, Warning message, No results

## Field
Form field wrapper with label, description, error, and accessibility linking
Import: import { Field } from "@plexui/ui/components/Field"
Docs: https://plexui.com/docs/components/field
Props:
  - label (ReactNode) — Label text for the field
  - description (ReactNode) — Helper text below the label; linked via aria-describedby
  - errorMessage (ReactNode) — Error message below the control; auto-sets aria-invalid on child
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Controls the label font size to match the child control
  - required (boolean) default: false — Shows a required asterisk after the label (visual only)
  - orientation ("vertical" | "horizontal") default: "vertical" — Layout direction of label and control
  - opticallyAlign ("start" | "end") — Applies optical alignment to the child control via negative margin using its gutter
  - id (string) — Override the auto-generated id used for htmlFor/aria linking
  - children (ReactElement | (fieldProps) => ReactNode) — Form control; receives id, aria-describedby, and aria-invalid
Examples: Overview, With description, With error message, Required, Sizing, Horizontal layout, Textarea, Select, 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 picker with type validation and multi-file support
Import: import { FileUpload, FileCard, FileCardGroup } from "@plexui/ui/components/FileUpload"
Docs: https://plexui.com/docs/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)
  - multiple (boolean) default: false — Allow selecting multiple files
  - maxFiles (number) — Maximum number of files. Button disables at limit.
  - maxSize (number) — Maximum file size in bytes
  - value (File[]) — Controlled file list
  - onValueChange ((files: File[]) => void) — Callback when files are added or removed
  - onFileReject ((file: File, reason: string) => void) — Callback when a file is rejected (wrong type, too large, over limit)
  - errorMessage (string) — Error message — sets invalid visual state
  - invalid (boolean) default: false — Invalid state (auto-set when errorMessage is provided)
  FileCard:
    - file (File) — The file to display
    - onRemove (() => void) — Remove callback. When omitted, the delete button is hidden.
    - disabled (boolean) default: false — Disable the remove button
    - className (string) — Additional CSS class
  FileCardGroup:
    - children (ReactNode) — FileCard elements
    - className (string) — Additional CSS class
Examples: Overview, With files, Error state, Disabled, Read-only, With remove, Multiple files, Read-only list

## Float Input
Input with floating label that animates on focus
Import: import { FloatingLabelInput } from "@plexui/ui/components/FloatingLabelInput"
Docs: https://plexui.com/docs/components/floating-label-input
Props:
  - label (string) — Floating label text
  - description (ReactNode) — Helper text below the input
  - errorMessage (string) — Validation message below input; sets invalid state
  - disabled (boolean) default: false — Disable input interactions
  - invalid (boolean) default: false — Invalid visual state
  - readOnly (boolean) default: false — Read-only input state
  - onClear (() => void) — Shows a clear button when input has value
  - startAdornment (ReactNode) — Content rendered before the input, inside the field. Visible when focused or has value.
  - endAdornment (ReactNode) — Content rendered after the input, before the clear button
  - multiline (boolean) default: false — Render as an auto-growing textarea
  - rows (number) default: 2 — Initial visible text lines when multiline is true
Examples: Overview, Filled state, Textarea, With error message, With description, With description and error, Clear button, Disabled, Read only, All states, Password input, Password with visibility toggle, SSN input, Birthday input, Birthday with validation, Birthday states, Select, Multiple selection, Country select, Phone input

## Indicators
Display loading and progress states to users
Import: import { LoadingIndicator, CircularProgress, LoadingDots } from "@plexui/ui/components/Indicator"
Docs: https://plexui.com/docs/components/indicators
  LoadingIndicator:
    - size (number) — Size in px (or use --indicator-size CSS variable)
    - strokeWidth (number) — Stroke width
  CircularProgress:
    - progress (number) — Static progress 0–100 (disables animation)
    - size (number) — Diameter in px
    - strokeWidth (number) — Stroke thickness
    - done (boolean) — Completion state for animation
    - trackColor (string) — Track color (CSS variable or value)
    - trackActiveColor (string) — Active segment color
Examples: Overview, LoadingIndicator, Sizing & stroke, Color, Duration, CircularProgress, Progress, Sizing & stroke, Color, LoadingDots, Color

## Input
Semantic input text collection
Import: import { Input } from "@plexui/ui/components/Input"
Docs: https://plexui.com/docs/components/input
Props:
  - variant ("outline" | "soft") default: "outline" — Visual style of the input
  - size ("3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl") default: "md" — Controls the size of the input
  - gutterSize (string) — Controls gutter on the edges; defaults to value from size
  - disabled (boolean) default: false — Disables the input visually and from interactions
  - invalid (boolean) default: false — Mark the input as invalid
  - allowAutofillExtensions (boolean) default: false — Allow autofill extensions to appear in the input
  - autoSelect (boolean) default: false — Select all contents of the input when mounted
  - startAdornment (ReactNode) — Content rendered at the start of the input
  - endAdornment (ReactNode) — Content rendered at the end of the input
  - onClear (() => void) — When provided, displays a clear button that appears when the input has a value
  - pill (boolean) default: false — Fully rounded pill shape
  - opticallyAlign ("start" | "end") — Applies a negative margin using the current gutter to optically align with surrounding content
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

## Markdown Editor
Compact rich text editor embedded in a form field, powered by Tiptap
Import: import { MarkdownEditor } from "@plexui/ui/components/MarkdownEditor"
Docs: https://plexui.com/docs/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 (string) — Controlled markdown value
  - defaultValue (string) — Initial markdown for uncontrolled mode
  - onChange ((markdown: string) => void) — Called on content change
  - toolbarEnd (ReactNode) — Content rendered at the end of the toolbar
  - rows (number) default: 1 — Minimum visible rows
Examples: Placeholder, All formatting, With Field, Toolbar end slot, Variants, Disabled, Invalid

## Markdown
Render rich formatted content
Import: import { Markdown } from "@plexui/ui/components/Markdown"
Docs: https://plexui.com/docs/components/markdown
Props:
  - children (string) — Markdown source
  - includeMath (boolean) default: false — Enable LaTeX math rendering
Examples: Overview, Math

## Menu
Structured actions in a dropdown list
Import: import { Menu } from "@plexui/ui/components/Menu"
Docs: https://plexui.com/docs/components/menu
Props:
  - forceOpen (boolean) — Keep menu open (controlled)
  - onOpen (() => void) — Called when menu opens
  - onClose (() => void) — Called when menu closes
  - modal (boolean) — Whether menu is modal (focus trap)
  - width (number | string) — Panel width (px or CSS value)
  - minWidth (number | string) default: auto — Minimum panel width
  - side ("top" | "right" | "bottom" | "left") — Preferred placement
  - align ("start" | "center" | "end") — Alignment relative to trigger
  - 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)
  - onSelect ((event: Event) => void) — Called when item is selected
  - disabled (boolean) — Disable the item
  - checked (boolean) — Checked state
  - onCheckedChange ((checked: boolean) => void) — When checkbox toggles
  - indicatorPosition ("start" | "end") — Checkbox position
  - indicatorVariant (string) — Badge/indicator style (e.g. solid)
Examples: Overview, Natural sizing, Horizontal (icons only), Horizontal (icons with labels), Grouped items, Submenus, Checkbox items, Radio items, Item actions

## OTP Input
Individual digit input cells for verification code entry
Import: import { OTPInput } from "@plexui/ui/components/OTPInput"
Docs: https://plexui.com/docs/components/otp-input
Props:
  - length (number) default: 6 — Number of digit cells
  - value (string) — Controlled value
  - onChange ((value: string) => void) — Called when value changes
  - onComplete ((value: string) => void) — Called when all digits filled
  - grouping (number[]) — Grouping pattern with extra gap (e.g. [3,3])
  - invalid (boolean) default: false — Invalid visual state
  - errorMessage (string) — Error message below the input
  - disabled (boolean) default: false — Disable all cells
  - autoFocus (boolean) default: false — Auto-focus first cell on mount
Examples: Overview, Filled state, Grouped (3+3), With error, Disabled

## Popover
Generic floating UI utility for contextual actions
Import: import { Popover } from "@plexui/ui/components/Popover"
Docs: https://plexui.com/docs/components/popover
Props:
  - showOnHover (boolean) — Open on hover and focus instead of click
  - width (number | string) — Panel width (px or CSS value)
  - minWidth (number | string) default: 300 — Minimum panel width in px
  - maxWidth (number | string) — Maximum panel width
  - side ("top" | "right" | "bottom" | "left") — Preferred placement
  - align ("start" | "center" | "end") — Alignment relative to trigger
  - sideOffset (number) — Offset from trigger (px)
  - alignOffset (number) — Alignment offset (px)
Examples: Overview, Sizing the popover, Open on hover, Using the controller

## Progress Steps
Display progress through a multi-step process
Import: import { ProgressSteps } from "@plexui/ui/components/ProgressSteps"
Docs: https://plexui.com/docs/components/progress-steps
Props:
  - current (number) — 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
  - connectorStyle ("solid" | "dashed") default: "solid" — Connector line style
  - variant ("minimal") — Compact bar variant (requires total)
  - total (number) — Total steps for minimal variant
  - icon (ReactNode) — Custom icon instead of step number
Examples: Overview, Sizes, Vertical, With Icons, With Navigation, Minimal, Icons Only, Colors

## Radio Group
Semantic radio option selection
Import: import { RadioGroup } from "@plexui/ui/components/RadioGroup"
Docs: https://plexui.com/docs/components/radio-group
Props:
  - value (string) — Controlled selected value
  - defaultValue (string) — Initial selected value (uncontrolled)
  - onChange ((value: string) => void) — Called when selected option changes
  - direction ("col" | "row") default: "col" — Item flow direction
  - disabled (boolean) default: false — Disable the whole group
  - aria-label (string) — Accessible group label
  - block (boolean) default: false — Stretch item to fill available width
  - orientation ("left" | "right") default: "left" — Position of the radio indicator relative to the label
Examples: With Checkbox, Descriptions, Overview, Direction, Orientation, Group disabled, Item disabled, With description, With Field, With Field error, Choice card, Card selection, Grouped sections

## Select Control
Customizable select control for use with any type of floating UI
Import: import { SelectControl } from "@plexui/ui/components/SelectControl"
Docs: https://plexui.com/docs/components/select-control
Props:
  - selected (boolean) — Whether a value is selected (affects placeholder styling)
  - variant ("soft" | "outline" | "ghost") default: "outline" — Visual variant
  - size (string) — Control size
  - pill (boolean) — Fully rounded trigger
  - StartIcon (Component) — Icon at start
  - onClearClick (() => void) — Enables clear button when set
  - dropdownIconType ("chevronDown" | "dropdown" | "none") — Dropdown indicator style
  - invalid (boolean) — Invalid state
  - disabled (boolean) — Disable control
  - block (boolean) — Full width
  - loading (boolean) — Loading state
  - opticallyAlign ("start" | "end") — Optical alignment
Examples: Overview, Variants, Sizing & roundness, Selected, Start icon, Dropdown icon, Clearable, Loading, Invalid, Disabled, Block, Optical alignment, Country selector, Country code selector, Phone form

## Select
Choose from a dropdown of options
Import: import { Select } from "@plexui/ui/components/Select"
Docs: https://plexui.com/docs/components/select
Props:
  - options (Options<T>) — Array of options or grouped options
  - value (string | string[]) — Selected value (single) or values (multiple)
  - onChange (function) — Called when selection changes
  - multiple (boolean) default: false — Allow multiple selection
  - placeholder (string) default: "Select..." — Trigger placeholder
  - variant (string) default: "outline" — Trigger variant
  - size (string) default: "md" — Trigger size
  - pill (boolean) default: false — Rounded trigger
  - clearable (boolean) default: false — Show clear button
  - block (boolean) default: true — Full width trigger
  - disabled (boolean) default: false — Disable select
  - actions (array) — Actions below options list
  - OptionView (React.FC) — Custom option render
  - TriggerView (React.FC) — Custom trigger render (multi)
  - searchPlaceholder (string) — Search input placeholder
Examples: Overview, Custom views, Actions, Grouped options, Multiple selection, Column configuration

## Shimmer Text
Animated shimmer effect for text content
Import: import { ShimmerText, ShimmerableText } from "@plexui/ui/components/ShimmerText"
Docs: https://plexui.com/docs/components/shimmer-text
Props:
  - as ("p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div") default: "div" — HTML element to render
  - children (ReactNode) — Text content to shimmer
  - className (string) — Additional CSS classes
  - shimmer (boolean) default: false — Whether the shimmer animation is active
Examples: Overview, Semantic elements, Controllable shimmer

## Sidebar
Composable navigation sidebar for application layouts
Import: import { SidebarProvider, SidebarLayout, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@plexui/ui/components/Sidebar"
Docs: https://plexui.com/docs/components/sidebar
  SidebarProvider:
    - collapsible ("offcanvas" | "icon" | "none") default: "offcanvas" — Collapse behavior: offcanvas (drawer on mobile, full collapse on desktop), icon (icon rail), or none
    - defaultOpen (boolean) default: true — Initial open state (uncontrolled)
    - open (boolean) — Controlled open state
    - onOpenChange ((open: boolean) => void) — Called when open state changes
  Sidebar:
    - variant ("sidebar" | "docs") default: "sidebar" — Visual variant
    - side ("left" | "right") default: "left" — Which side the sidebar is on
  SidebarMenuButton:
    - isActive (boolean) default: false — Highlight the current page
    - tooltip (string | ReactNode) — Label shown on hover when collapsed (icon mode). Hidden on mobile.
  SidebarGroupLabel:
    - size ("sm" | "lg") default: "lg" — sm — compact, tertiary; lg — larger, primary, more spacing
  SidebarMenuSub:
    - open (boolean) default: true — Whether submenu is expanded
    - hasIcons (boolean) default: false — Align child items with parent text that has icons
  SidebarCard:
    - dismissible (boolean) — Shows dismiss button
    - onDismiss (() => void) — Callback when dismissed
Examples: App Shell, Basic, Collapsible Sections, Search and Filter, Tree with Hover Actions, Mobile Menu, Search Input

## Skeleton
Use to show a placeholder while content is loading
Import: import { Skeleton } from "@plexui/ui/components/Skeleton"
Docs: https://plexui.com/docs/components/skeleton
Props:
  - circle (boolean) default: false — Render a circular skeleton
  - className (string) — Set dimensions and custom styling
Examples: Overview, Card, Text, Form, Table

## Slider
Fine-tune values within a set range
Import: import { Slider } from "@plexui/ui/components/Slider"
Docs: https://plexui.com/docs/components/slider
Props:
  - value (number | number[]) — Current value; array when range is true
  - min (number) — Minimum value
  - max (number) — Maximum value
  - step (number) — Step increment
  - range (boolean) default: false — Enable multi-thumb range mode
  - orientation ("horizontal" | "vertical") default: "horizontal" — Layout direction of the slider
  - resetValue (number) — Value for reset option (single mode only)
  - unit (string) — Unit displayed (e.g. ms, px)
  - prefixUnit (string) — Unit displayed before the value (e.g. $)
  - label (ReactNode) — Label (string or JSX)
  - marks (Array<{ value: number, label: string }>) — Marks below track (horizontal only)
  - onChange ((value: number | number[]) => void) — Change handler; receives array when range is true
  - minStepsBetweenThumbs (number) — Minimum steps between thumbs (range mode only)
  - disabled (boolean) default: false — Disable slider
Examples: Overview, Adding a tooltip, Marks, Range, Multiple thumbs, Vertical, Disabled

## StatCard
Display key metrics and KPIs with trend indicators
Import: import { StatCard } from "@plexui/ui/components/StatCard"
Docs: https://plexui.com/docs/components/stat-card
Props:
  - description (string) — Subtitle below the value
  - trend ({ value: number; label?: string }) — Trend indicator with percentage
  - invertTrend (boolean) default: false — Invert trend colors (positive = bad)
  - trendPosition ("value" | "header") default: "value" — Where the trend indicator is rendered
  - trendVariant ("text" | "badge") default: "text" — Render trend as text or badge
  - size ("default" | "sm") default: "default" — Card size — sm for compact analytics layouts
  - icon (ReactNode) — Icon displayed on the left with a soft background
  - sparkline (ReactNode) — Chart rendered at the bottom
  - progress (number) — Progress bar value (0-100)
  - progressLabel (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
  - accentColor ("primary" | "secondary" | "danger" | "info" | "discovery" | "success" | "caution" | "warning") default: "primary" — Left border color (accent variant)
Examples: Overview, Sizes, Trend position, Trend variant, Info tooltip, With icon, With progress, Accent border, Inverted trend

## Switch
Toggle control for on and off states
Import: import { Switch } from "@plexui/ui/components/Switch"
Docs: https://plexui.com/docs/components/switch
Props:
  - checked (boolean) — Controlled state
  - defaultChecked (boolean) — Initial state (uncontrolled)
  - onCheckedChange ((next: boolean) => void) — Called when toggled
  - label (ReactNode) — Accessible label rendered next to the switch
  - description (ReactNode) — Secondary text below the label, linked via aria-describedby
  - labelPosition ("start" | "end") default: "end" — Label on left (start) or right (end)
  - disabled (boolean) default: false — Prevent interaction
  - required (boolean) — Required for form submission
  - name (string) — Form field name
  - value (string) — Value when submitted
  - className (string) — CSS classes applied to wrapper node
  - id (string) — The id of the switch element
Examples: Base, 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 HTML table primitives and a full-featured data table powered by TanStack Table v8
Import: import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@plexui/ui/components/Table"
Docs: https://plexui.com/docs/components/table
  Table Primitives:
    - Table (table) — Root table container with horizontal scroll wrapper
    - 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:
    - variant ("default" | "bordered") default: "default" — Visual variant — bordered adds a rounded border and tinted header
    - pageSize (number) default: 10 — Rows per page. Set 0 or Infinity to disable pagination
    - initialSorting (SortingState) — Initial column sorting state
    - globalFilter (string) — Controlled search/filter string
    - onGlobalFilterChange ((value: string) => void) — Callback when filter changes
    - onRowClick ((row: TData) => void) — Click handler for rows, makes rows interactive
    - columnVisibility (VisibilityState) — Controlled column visibility state
    - onColumnVisibilityChange ((visibility: VisibilityState) => void) — Callback when visibility changes
    - enableRowSelection (boolean) default: false — Enable row selection checkboxes
    - rowSelection (RowSelectionState) — Controlled row selection state
    - onRowSelectionChange ((selection: RowSelectionState) => void) — Callback when selection changes
    - getRowId ((row: TData) => string) — Custom row ID accessor
    - emptyMessage (ReactNode) default: "No results." — Shown when no rows
    - showPagination (boolean) default: true — Whether to show pagination controls
    - className (string) — Class applied to outermost wrapper
  DataTableColumnHeader:
  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, Cell variants, Filtering, Column visibility, Empty state

## Tabs
Toggle through grouped options with segmented or underline styles
Import: import { Tabs } from "@plexui/ui/components/Tabs"
Docs: https://plexui.com/docs/components/tabs
Props:
  - value (string) — Selected tab value (controlled)
  - onChange ((value: string) => void) — Called when selection changes
  - 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 (ControlSize) default: "md" — Control height (3xs through 3xl)
  - gutterSize (string) — 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)
  - icon (ReactNode) — Icon element (sized automatically)
  - badge (number | { content: ReactNode; color?: string; variant?: string }) — Badge/count or custom badge config
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

## Tag Input
Enter multiple unique tags
Import: import { TagInput } from "@plexui/ui/components/TagInput"
Docs: https://plexui.com/docs/components/tag-input
Props:
  - value (Tag[]) — Controlled value
  - defaultValue (Tag[]) — Uncontrolled initial tags
  - onChange ((tags: Tag[]) => void) — Change handler
  - placeholder (string) — Input placeholder
  - validator ((value: string) => boolean) — Validates each tag; invalid tags shown in red
  - maxTags (number) — Max tags before input is disabled
  - rows (number) default: 1 — Min rows
  - size (string) default: xl — Control height when rows=1
  - autoFocus (boolean) default: false — Focus on mount
Examples: Overview, Suggestions

## Text Link
Semantic link for internal and external links
Import: import { TextLink } from "@plexui/ui/components/TextLink"
Docs: https://plexui.com/docs/components/text-link
Props:
  - children (ReactNode) — Link content
  - href (string) — URL
  - to (object) — Router link destination (internal)
  - primary (boolean) default: false — Primary color, no default underline
  - underline (boolean) default: true — Underline (default true unless primary)
  - forceExternal (boolean) — Force external link behavior
  - as (Component) — Link component (e.g. Next Link)
Examples: Overview, Inline usage, Default inheritance, Primary color, Underline, External links, Font weight

## Textarea
Semantic multi-line text input collection
Import: import { Textarea } from "@plexui/ui/components/Textarea"
Docs: https://plexui.com/docs/components/textarea
Props:
  - 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
  - gutterSize (string) — Horizontal padding; defaults from size
  - disabled (boolean) default: false — Disable the textarea
  - invalid (boolean) default: false — Mark as invalid
  - allowAutofillExtensions (boolean) default: false — Allow autofill extensions
  - autoSelect (boolean) default: false — Select all contents when mounted
  - rows (number) default: 3 — Initial row count
  - autoResize (boolean) default: false — Grow/shrink with content
  - maxRows (number) — Max rows when autoResize
Examples: Base, Variants, Auto resize, Sizing, Disabled, Invalid, Auto select text, Autofill extensions

## Toast
Transient notifications anchored to a corner of the viewport
Import: import { Toaster, toast } from "@plexui/ui/components/Toast"
Docs: https://plexui.com/docs/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, Persistent

## Tooltip
Brief and informative hover text
Import: import { Tooltip } from "@plexui/ui/components/Tooltip"
Docs: https://plexui.com/docs/components/tooltip
Props:
  - content (ReactNode) — Tooltip content (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
  - openDelay (number) default: 150 — Delay before showing (ms)
  - side (string) default: "top" — Preferred side
  - sideOffset (number) default: 5 — Distance from trigger
  - align (string) default: "center" — Alignment
  - alignOffset (number) default: 0 — Alignment offset
  - gutterSize ("sm" | "md" | "lg") default: "md" — Content padding
  - contentClassName (string) — Class for tooltip content
  - forceOpen (boolean) — Force open or closed
Examples: Base, Different triggers, Conditionally enabled, Compact tooltips