# Selaras

> Nuxt-first Vue components for adaptable design systems. Component APIs, composables, theming, and complete usage examples.

## Documentation Sets

- [Complete Selaras documentation](https://selarasui.my.id/llms-full.txt): All documentation with Vue example source.

## Getting Started

- [Adaptive interfaces](https://selarasui.my.id/raw/overview/getting-started/adaptive-interfaces.md): Opt into mobile presentation for common controls.
- [Component usage](https://selarasui.my.id/raw/overview/getting-started/component-usage.md): Use providers, component props, slots, models, and shared configuration.
- [Icons](https://selarasui.my.id/raw/overview/getting-started/icons.md): Configure internal icons globally and provide icons locally.
- [Installation](https://selarasui.my.id/raw/overview/getting-started/installation.md): Install Selaras and connect its providers and styles.
- [Introduction](https://selarasui.my.id/raw/overview/getting-started/introduction.md): Learn what Selaras is, what it provides, and how you can customize it.
- [Messages and localization](https://selarasui.my.id/raw/overview/getting-started/messages.md): Customize internal text, accessible labels, and formatting locales.
- [Migrating to 1.0](https://selarasui.my.id/raw/overview/getting-started/migrating-to-1.md): Update pre-1.0 Selaras themes, configuration, and adaptive controls.
- [Nuxt configuration](https://selarasui.my.id/raw/overview/getting-started/nuxt-configuration.md): Configure component imports, class prefixes, adaptive breakpoints, and color roles.
- [TypeScript](https://selarasui.my.id/raw/overview/getting-started/typescript.md): Importing a component's Props, Emits and Slots types.

## Theming

- [Color modes](https://selarasui.my.id/raw/overview/theming/color-modes.md): Use light, dark, and system appearance with optional scoped modes.
- [Color roles](https://selarasui.my.id/raw/overview/theming/color-roles.md): Configure built-in and custom semantic colors.
- [Complete themes](https://selarasui.my.id/raw/overview/theming/complete-themes.md): Build a complete CSS theme with light and dark recipes.
- [Component styling](https://selarasui.my.id/raw/overview/theming/component-styling.md): Customize individual component slots and understand style precedence.
- [CSS tokens](https://selarasui.my.id/raw/overview/theming/css-tokens.md): Customize semantic tokens and foundation palettes in CSS.
- [Global configuration](https://selarasui.my.id/raw/overview/theming/global-configuration.md): Set shared component classes, defaults, and runtime tokens.
- [Theming](https://selarasui.my.id/raw/overview/theming/overview.md): Choose the right customization layer for your application.
- [Scoped themes](https://selarasui.my.id/raw/overview/theming/scoped-themes.md): Apply component configuration and color modes to a subtree.

## Components

- [Calendar](https://selarasui.my.id/raw/components/data/calendar.md): An inline, accessible date grid with slots for day markers, holidays, and meeting content.
- [Table](https://selarasui.my.id/raw/components/data/table.md): A table built on TanStack Table, with a declarative column API - sorting, row selection, pagination, filtering, expansion, column visibility, virtual scroll, and pinned columns out of the box.
- [Timeline](https://selarasui.my.id/raw/components/data/timeline.md): An ordered timeline for activity feeds, project milestones, and event history, with flexible orientation and item slots.
- [Alert](https://selarasui.my.id/raw/components/elements/alert.md): An inline status banner - icon, title, description, and an optional dismiss button.
- [Avatar](https://selarasui.my.id/raw/components/elements/avatar.md): A circular (or rounded) image or initials placeholder for representing a person or entity.
- [AvatarGroup](https://selarasui.my.id/raw/components/elements/avatar-group.md): Stack multiple avatars with overlapping rings and an optional overflow count.
- [Badge](https://selarasui.my.id/raw/components/elements/badge.md): A small themed pill for labels, tags, and status indicators.
- [Button](https://selarasui.my.id/raw/components/elements/button.md): A clickable action element with color, variant and size options.
- [ButtonGroup](https://selarasui.my.id/raw/components/elements/button-group.md): Visually joins adjacent buttons into one unit.
- [Chip](https://selarasui.my.id/raw/components/elements/chip.md): A removable tag for representing a value the user can dismiss - a filter, a selected item, a free-text entry.
- [Icon](https://selarasui.my.id/raw/components/elements/icon.md): A thin wrapper around Nuxt Icon - one shared component, everywhere an icon shows up in this library or your own markup.
- [Kbd](https://selarasui.my.id/raw/components/elements/kbd.md): A themed keyboard key/shortcut hint.
- [Progress](https://selarasui.my.id/raw/components/elements/progress.md): A linear or circular progress indicator, built on Reka UI's Progress primitive.
- [Separator](https://selarasui.my.id/raw/components/elements/separator.md): A visual (and semantic) rule between sections, built on Reka UI's Separator primitive.
- [Skeleton](https://selarasui.my.id/raw/components/elements/skeleton.md): A themed placeholder block for content that's still loading.
- [Toggle](https://selarasui.my.id/raw/components/elements/toggle.md): A two-state pressed/unpressed button, built on Reka UI's Toggle primitive.
- [Toggle Group](https://selarasui.my.id/raw/components/elements/toggle-group.md): A set of related toggles sharing one selection - single or multiple - built on Reka UI's ToggleGroup primitive.
- [Autocomplete](https://selarasui.my.id/raw/components/forms/autocomplete.md): A free-text input with suggestions - the typed value doesn't have to match an option, built on the same Combobox foundation as Select.
- [Checkbox](https://selarasui.my.id/raw/components/forms/checkbox.md): A checkbox with an optional label, built on Reka UI's Checkbox primitive.
- [ColorPicker](https://selarasui.my.id/raw/components/forms/color-picker.md): A trigger-and-popover control for picking a color, built on five independent Reka UI color primitives sharing one hex value.
- [DatePicker](https://selarasui.my.id/raw/components/forms/date-picker.md): A calendar-popover date input built on Reka UI's DatePicker primitive.
- [FileUpload](https://selarasui.my.id/raw/components/forms/file-upload.md): A drag-and-drop dropzone for selecting files - selection and validation only, uploading to a server is left to you.
- [FormField](https://selarasui.my.id/raw/components/forms/form-field.md): Label, description, hint, and error-message wrapper that wires id/aria-describedby/invalid into whatever form control it wraps.
- [Input](https://selarasui.my.id/raw/components/forms/input.md): A text input with optional leading and trailing icons.
- [InputGroup](https://selarasui.my.id/raw/components/forms/input-group.md): Visually joins form controls and addons into one unit.
- [InputNumber](https://selarasui.my.id/raw/components/forms/input-number.md): A numeric input with increment/decrement buttons.
- [Listbox](https://selarasui.my.id/raw/components/forms/listbox.md): An inline selection list with search, groups, rich content, and virtualization.
- [PinInput](https://selarasui.my.id/raw/components/forms/pin-input.md): A row of single-character boxes for PIN/OTP codes, built on Reka UI's PinInput primitive.
- [RadioGroup](https://selarasui.my.id/raw/components/forms/radio-group.md): An items-driven radio group built on Reka UI's RadioGroup primitive.
- [Rating](https://selarasui.my.id/raw/components/forms/rating.md): A star rating input, built on Reka UI's Rating primitive.
- [Select](https://selarasui.my.id/raw/components/forms/select.md): A select constrained to its options - single or multiple, optionally searchable and virtualized, built on Reka UI's Combobox primitive.
- [Slider](https://selarasui.my.id/raw/components/forms/slider.md): A draggable control for picking a number (or a range) within a min/max, built on Reka UI's Slider primitive.
- [Switch](https://selarasui.my.id/raw/components/forms/switch.md): A toggle switch with an optional label, built on Reka UI's Switch primitive.
- [Textarea](https://selarasui.my.id/raw/components/forms/textarea.md): A multi-line text input, matching Input's border interaction pattern.
- [TransferList](https://selarasui.my.id/raw/components/forms/transfer-list.md): Assign items between two searchable selection panels with responsive layout.
- [Form Validation](https://selarasui.my.id/raw/components/forms/validation.md): Selaras doesn't ship its own schema-validation engine - wire a validation library's per-field error straight into FormField's error prop instead.
- [App](https://selarasui.my.id/raw/components/layout/app.md): Wraps your root app.vue - required once, for every app using Selaras.
- [Card](https://selarasui.my.id/raw/components/layout/card.md): A simple container for grouping related content.
- [CardGroup](https://selarasui.my.id/raw/components/layout/card-group.md): A responsive grid wrapper for laying out several Cards side by side.
- [ColorModeSwitch](https://selarasui.my.id/raw/components/layout/color-mode-switch.md): A switch that changes between light and dark mode.
- [ColorModeToggle](https://selarasui.my.id/raw/components/layout/color-mode-toggle.md): A button that switches between light and dark mode.
- [Container](https://selarasui.my.id/raw/components/layout/container.md): A max-width, horizontally-padded wrapper for page layout.
- [Header](https://selarasui.my.id/raw/components/layout/header.md): A sticky top bar with left/right slots - logo on one side, actions like ColorModeToggle on the other.
- [ScrollArea](https://selarasui.my.id/raw/components/layout/scroll-area.md): A themed scrollable region, built on Reka UI's ScrollArea primitive.
- [Splitter](https://selarasui.my.id/raw/components/layout/splitter.md): A resizable split-pane layout - drag the handle to resize, built on Reka UI's own resizable-panel primitive.
- [Theme](https://selarasui.my.id/raw/components/layout/theme.md): Scope theme overrides to a subtree instead of the whole app.
- [Accordion](https://selarasui.my.id/raw/components/navigation/accordion.md): An items-driven collapsible list, built on Reka UI's Accordion primitive.
- [Breadcrumb](https://selarasui.my.id/raw/components/navigation/breadcrumb.md): A "you are here" nav trail.
- [Collapsible](https://selarasui.my.id/raw/components/navigation/collapsible.md): A single show/hide panel, built on Reka UI's Collapsible primitive.
- [NavigationMenu](https://selarasui.my.id/raw/components/navigation/navigation-menu.md): A horizontal or vertical navigation bar built on Reka UI's NavigationMenu primitive.
- [Pagination](https://selarasui.my.id/raw/components/navigation/pagination.md): A page-number control built on Reka UI's Pagination primitive.
- [Stepper](https://selarasui.my.id/raw/components/navigation/stepper.md): A multi-step progress indicator, built on Reka UI's Stepper primitive.
- [Tabs](https://selarasui.my.id/raw/components/navigation/tabs.md): An items-driven tab list built on Reka UI's Tabs primitive.
- [Tree](https://selarasui.my.id/raw/components/navigation/tree.md): An expandable, selectable hierarchy - file browsers, nested settings, org structures - built on Reka UI's Tree primitive.
- [AlertDialog](https://selarasui.my.id/raw/components/overlays/alert-dialog.md): A confirmation dialog that can't be dismissed by an outside click, built on Reka UI's AlertDialog primitive.
- [Command Palette](https://selarasui.my.id/raw/components/overlays/command-palette.md): A ⌘K search-and-act overlay - fuzzy search across grouped commands, keyboard-navigable, opened from anywhere.
- [Context Menu](https://selarasui.my.id/raw/components/overlays/context-menu.md): A right-click menu built on Reka UI's ContextMenu primitive.
- [Drawer](https://selarasui.my.id/raw/components/overlays/drawer.md): A drag-to-dismiss panel that slides in from an edge, built on Reka UI's Drawer primitive.
- [Dropdown](https://selarasui.my.id/raw/components/overlays/dropdown.md): A menu of grouped actions built on Reka UI's DropdownMenu primitive.
- [Modal](https://selarasui.my.id/raw/components/overlays/modal.md): A dialog overlay built on Reka UI's Dialog primitive.
- [Popover](https://selarasui.my.id/raw/components/overlays/popover.md): A generic floating content container built on Reka UI's Popover primitive.
- [Slideover](https://selarasui.my.id/raw/components/overlays/slideover.md): A panel that slides in from an edge of the screen, built on Reka UI's Dialog primitive.
- [Toast](https://selarasui.my.id/raw/components/overlays/toast.md): A stackable notification, triggered imperatively via useToast().
- [Tooltip](https://selarasui.my.id/raw/components/overlays/tooltip.md): A short hint shown on hover or focus, built on Reka UI's Tooltip primitive.
- [Callout](https://selarasui.my.id/raw/components/typography/callout.md): A note/tip/warning/danger admonition box for long-form content.
- [CodeButton](https://selarasui.my.id/raw/components/typography/code-button.md): A standalone copy-to-clipboard button for a command or snippet referenced inline in prose.
- [CodeGroup](https://selarasui.my.id/raw/components/typography/code-group.md): Tabbed code blocks - e.g. npm/pnpm/yarn install commands.
- [CodeTree](https://selarasui.my.id/raw/components/typography/code-tree.md): A file tree paired with a code viewer - click a file, see its content.
- [FileTree](https://selarasui.my.id/raw/components/typography/file-tree.md): A collapsible file/directory browser.
- [Prose](https://selarasui.my.id/raw/components/typography/prose.md): A pipeline-agnostic typography class for long-form content, plus two enhanced components for renderers that support them.
- [ReadMore](https://selarasui.my.id/raw/components/typography/read-more.md): Truncates long content behind a fading "Show more" toggle.

## Composites

- [DashboardGroup](https://selarasui.my.id/raw/composites/dashboard/dashboard-group.md): The root of a resizable, collapsible dashboard shell - sidebar, resize handle, and main content panel.
- [DashboardNavbar](https://selarasui.my.id/raw/composites/dashboard/dashboard-navbar.md): A top bar for a DashboardPanel's own main content area.
- [DashboardPanel](https://selarasui.my.id/raw/composites/dashboard/dashboard-panel.md): The main-content counterpart to DashboardSidebar - fills whatever width the sidebar doesn't take.
- [DashboardResizeHandle](https://selarasui.my.id/raw/composites/dashboard/dashboard-resize-handle.md): The draggable divider between DashboardSidebar and DashboardPanel.
- [DashboardSidebar](https://selarasui.my.id/raw/composites/dashboard/dashboard-sidebar.md): A resizable, collapsible sidebar that becomes a drawer on small screens.
- [DashboardSidebarToggle](https://selarasui.my.id/raw/composites/dashboard/dashboard-sidebar-toggle.md): A themed button that collapses/expands (or opens/closes, on mobile) a sibling DashboardSidebar.
- [ContentNavigation](https://selarasui.my.id/raw/composites/documentation/content-navigation.md): A nested, collapsible nav tree - feed it queryCollectionNavigation()'s result directly.
- [ContentSurround](https://selarasui.my.id/raw/composites/documentation/content-surround.md): Previous/next page navigation at the bottom of a content page.
- [ContentToc](https://selarasui.my.id/raw/composites/documentation/content-toc.md): A table of contents with scroll-spy active-heading highlighting.
- [PageAside](https://selarasui.my.id/raw/composites/documentation/page-aside.md): A sticky, scrollable side rail used for both a page's nav and table-of-contents columns.
- [PageHeader](https://selarasui.my.id/raw/composites/documentation/page-header.md): Renders a content page's title and description.

## Blocks

- [Dashboard overview](https://selarasui.my.id/raw/blocks/dashboard-overview.md): A workspace dashboard with a responsive sidebar, project progress and recent activity.
- [Data management](https://selarasui.my.id/raw/blocks/data-management.md): A member-management table with search, role filtering, pagination and an editor.
- [Blocks](https://selarasui.my.id/raw/blocks/overview.md): Complete interface examples. Preview, copy and adapt them to your app.
- [Profile settings](https://selarasui.my.id/raw/blocks/profile-settings.md): A profile editor with notification preferences, save feedback and unsaved-change tracking.
- [Sign in](https://selarasui.my.id/raw/blocks/sign-in.md): A focused sign-in form with password visibility and a reset-password flow.

## Utilities

- [useConfirm](https://selarasui.my.id/raw/utilities/composables/use-confirm.md): Ask for confirmation from an action handler.
- [useDrawer](https://selarasui.my.id/raw/utilities/composables/use-drawer.md): Open a drawer panel programmatically from anywhere.
- [useIcons](https://selarasui.my.id/raw/utilities/composables/use-icons.md): Override the icon set used internally across every component.
- [useLocale](https://selarasui.my.id/raw/utilities/composables/use-locale.md): Set the app-wide default locale that date/time formatting falls back to.
- [useMessages](https://selarasui.my.id/raw/utilities/composables/use-messages.md): Override the text every component renders internally, across every language.
- [useModal](https://selarasui.my.id/raw/utilities/composables/use-modal.md): Open a modal programmatically from anywhere.
- [useSlideover](https://selarasui.my.id/raw/utilities/composables/use-slideover.md): Open a slideover panel programmatically from anywhere.
- [v-hotkey](https://selarasui.my.id/raw/utilities/directives/hotkey.md): Bind a keyboard shortcut to an element or handler.
- [v-mask](https://selarasui.my.id/raw/utilities/directives/mask.md): Format text as a user types into an input.
- [v-ripple](https://selarasui.my.id/raw/utilities/directives/ripple.md): A click-feedback ripple effect for any element.

## Agent Support

- [Documentation exports](https://selarasui.my.id/raw/overview/agent-support/documentation.md): Readable documentation and Vue examples for coding assistants.
- [MCP](https://selarasui.my.id/raw/overview/agent-support/mcp.md): Retrieve versioned component documentation and examples through a local MCP server.
- [Agent support](https://selarasui.my.id/raw/overview/agent-support/overview.md): Help agents discover components and use accurate documentation.
- [Skills](https://selarasui.my.id/raw/overview/agent-support/skills.md): Guide coding agents toward the right Selaras components and customization APIs.

## Notes

- Check the component documentation before building custom UI. Prefer existing Selaras components and customize them with props, slots, ui overrides, or theme configuration.
- Use SApp for application providers. Component names use the S prefix by default; consumers can configure a different prefix.