# Cocoar UI Vue > Vue 3 Component Library Production-ready components for the Cocoar Design System. Accessible, themeable, and tree-shakeable. ## Table of Contents ### Guide - [Getting Started](/guide/getting-started.md): Set up @cocoar/vue-ui in a Vue 3 project: install, import fonts and styles, use components, toggle dark mode, and register the overlay plugin. - [Error Handling](/guide/error-handling.md): Error handling patterns in Cocoar UI: graceful fallbacks, overlay Promise rejections, error toasts, and handling failures in application code. - [Theming](/guide/theming.md): Theme Cocoar with CSS custom properties: set five oklch base colors and all shade scales for light and dark mode recalculate automatically. - [Migrating to 2.11](/guide/migration.md): Migration guide for Cocoar UI 2.11: date/time pickers move onto CoarFormField, the clear button becomes opt-in, and two CSS tokens are renamed. - [Migrating Page Builder to 3.0](/guide/migration-page-builder-3.md): Migration guide for @cocoar/vue-page-builder 3.0: four PageConfig concepts removed, several names disambiguated, and documents migrated to schemaVersion 6. - [Changelog](/guide/changelog.md): Full version history of the Cocoar Design System packages, listing added features, changes, and fixes for each release. ### Foundations - [Design Principles](/foundations/design-principles.md): The six Cocoar Design System principles — clarity, consistency, accessibility, touch-first, performance, developer experience — plus the design token architecture and do's and don'ts. - [Colors](/foundations/colors.md): Cocoar's two-layer color system: primitive palettes and semantic tokens that adapt to light and dark mode, with naming convention and full token reference. - [Typography](/foundations/typography.md): The Cocoar type scale: eleven utility classes from display to footnote using Inter and Poppins, with sizes, weights, and usage examples. - [Spacing & Effects](/foundations/spacing.md): Spacing and effects tokens: the 4 px spacing scale, border radius, stroke widths, and six shadow elevation levels with reference tables. - [Icons](/foundations/icons.md): CoarIcon and the built-in SVG icon set: preset sizes, colors, rotation, spin animation, and registering custom icon sources with fallback. - [Motion](/foundations/motion.md): Motion design tokens: duration and easing CSS variables plus pre-composed transition values, with interactive demos and usage examples. - [Theme Editor](/foundations/theming.md): CoarThemeEditor, a live token editor: explore primitive, semantic, and component token layers, apply presets, and export a CSS snippet. #### Localization - [Localization Setup](/foundations/localization/setup.md): Install and configure @cocoar/vue-localization: register the createCoarLocalization() plugin, set locale and translation URLs, and switch languages at runtime. - [Formatting](/foundations/localization/formatting.md): Locale-aware number, currency, percent, and date formatting via the useL10n() composable from @cocoar/vue-localization, reacting to language changes. - [Translations](/foundations/localization/translations.md): Translation lookup with the useI18n() composable: t() and tRef() with parameter interpolation, HTTP-loaded or code-registered translations, and fallbacks. - [Timezones](/foundations/localization/timezones.md): The useTimezone() composable exposes the detected IANA timezone as a reactive ref, with support for custom timezone providers. ### Guide - [Getting Started](/guide/getting-started.md): Set up @cocoar/vue-ui in a Vue 3 project: install, import fonts and styles, use components, toggle dark mode, and register the overlay plugin. - [Error Handling](/guide/error-handling.md): Error handling patterns in Cocoar UI: graceful fallbacks, overlay Promise rejections, error toasts, and handling failures in application code. - [Theming](/guide/theming.md): Theme Cocoar with CSS custom properties: set five oklch base colors and all shade scales for light and dark mode recalculate automatically. - [Migrating to 2.11](/guide/migration.md): Migration guide for Cocoar UI 2.11: date/time pickers move onto CoarFormField, the clear button becomes opt-in, and two CSS tokens are renamed. - [Migrating Page Builder to 3.0](/guide/migration-page-builder-3.md): Migration guide for @cocoar/vue-page-builder 3.0: four PageConfig concepts removed, several names disambiguated, and documents migrated to schemaVersion 6. - [Changelog](/guide/changelog.md): Full version history of the Cocoar Design System packages, listing added features, changes, and fixes for each release. ### Foundations - [Design Principles](/foundations/design-principles.md): The six Cocoar Design System principles — clarity, consistency, accessibility, touch-first, performance, developer experience — plus the design token architecture and do's and don'ts. - [Colors](/foundations/colors.md): Cocoar's two-layer color system: primitive palettes and semantic tokens that adapt to light and dark mode, with naming convention and full token reference. - [Typography](/foundations/typography.md): The Cocoar type scale: eleven utility classes from display to footnote using Inter and Poppins, with sizes, weights, and usage examples. - [Spacing & Effects](/foundations/spacing.md): Spacing and effects tokens: the 4 px spacing scale, border radius, stroke widths, and six shadow elevation levels with reference tables. - [Icons](/foundations/icons.md): CoarIcon and the built-in SVG icon set: preset sizes, colors, rotation, spin animation, and registering custom icon sources with fallback. - [Motion](/foundations/motion.md): Motion design tokens: duration and easing CSS variables plus pre-composed transition values, with interactive demos and usage examples. - [Theme Editor](/foundations/theming.md): CoarThemeEditor, a live token editor: explore primitive, semantic, and component token layers, apply presets, and export a CSS snippet. #### Localization - [Localization Setup](/foundations/localization/setup.md): Install and configure @cocoar/vue-localization: register the createCoarLocalization() plugin, set locale and translation URLs, and switch languages at runtime. - [Formatting](/foundations/localization/formatting.md): Locale-aware number, currency, percent, and date formatting via the useL10n() composable from @cocoar/vue-localization, reacting to language changes. - [Translations](/foundations/localization/translations.md): Translation lookup with the useI18n() composable: t() and tRef() with parameter interpolation, HTTP-loaded or code-registered translations, and fallbacks. - [Timezones](/foundations/localization/timezones.md): The useTimezone() composable exposes the detected IANA timezone as a reactive ref, with support for custom timezone providers. ### Form Controls - [Button](/components/button.md): CoarButton — action button with five variants, four sizes, icons, loading and disabled states, full width and router-aware link rendering. - [Form Field](/components/form-field.md): CoarFormField — label, hint and validation wrapper for form controls with a severity-aware status icon, pinnable popover and live-evaluated rules - [Text Input](/components/text-input.md): CoarTextInput — text field with validation states, prefix/suffix decorations, clearable option, four sizes and multiline textarea mode - [Number Input](/components/number-input.md): CoarNumberInput — numeric input with min/max clamping, configurable step, optional stepper buttons, four sizes and standard form states - [Password Input](/components/password-input.md): CoarPasswordInput — masked text input with show/hide visibility toggle, clearable option, four sizes, validation states and CoarFormField integration - [OTP Input ](/components/otp-input.md): CoarOtpInput — N-cell one-time-code input with auto-advance, paste spreading, numeric/alphanumeric/text modes, masking, transform/accept hooks and a complete event - [Select](/components/select.md): CoarSelect, CoarMultiSelect and CoarTagSelect — dropdown selection with inline search, clearable state, option groups, sorting and form-field integration - [Listbox](/components/listbox.md): CoarListbox — single-column selectable list with grouping, search, multi-select highlighting, keyboard navigation, custom item renderers and display-only mode - [Dual Listbox](/components/dual-listbox.md): CoarDualListbox — two-column transfer list with move buttons, per-column search, grouping, custom item renderers and drag & drop between columns - [Checkbox](/components/checkbox.md): CoarCheckbox — boolean checkbox with v-model, indeterminate state, four sizes, label positioning, validation states and CoarFormField integration. - [Checkbox Group](/components/checkbox-group.md): CoarCheckboxGroup — coordinate multiple checkboxes through one array or boolean-record model, with FormField integration. - [Radio Group](/components/radio-group.md): CoarRadioGroup and CoarRadioButton — single-choice selection with horizontal or vertical layout, four sizes, label positioning, keyboard navigation and form-field integration - [Switch](/components/switch.md): CoarSwitch — toggle for boolean settings that apply immediately, with four sizes, label positioning, validation states and keyboard and screen-reader support - [Segmented Control](/components/segmented-control.md): CoarSegmentedControl — toolbar button-bar for switching between mutually-exclusive view options, with icons, four sizes, disabled segments and full-width mode - [Date Picker](/components/date-picker.md): CoarPlainDatePicker — calendar date picker returning Temporal.PlainDate, with min/max limits, validation states, four sizes and form-field integration. - [DateTime Picker](/components/date-time-picker.md): CoarPlainDateTimePicker — combined calendar and time input returning a timezone-less Temporal.PlainDateTime, with validation states, four sizes and localized labels. - [Zoned DateTime Picker](/components/zoned-date-time-picker.md): CoarZonedDateTimePicker — timezone-aware datetime picker capturing date, time and IANA timezone as one Temporal.ZonedDateTime, with form states and four sizes - [Date · optional time](/components/date-or-time-picker.md): CoarZonedDateTimeOrDatePicker and CoarPlainDateTimeOrDatePicker — date pickers with a clock toggle switching between plain date and date-with-time values. - [Date Views ](/components/date-views.md): CoarPlainDateView, CoarPlainDateTimeView and CoarZonedDateTimeView — read-only, locale-aware displays for Temporal date values with cross-zone projection. ### Display - [Avatar](/components/avatar.md): CoarAvatar — user avatar with image and generated-initials fallback, six sizes, circle or square shape, clickable mode and group stacking. - [Badge](/components/badge.md): CoarBadge — count and status badge with six semantic variants, five sizes, max-value capping, dot mode, pulse animation and border ring. - [Card](/components/card.md): CoarCard — content container with elevated and outlined styles, semantic color variants, padding sizes and header, footer and inset slots. - [Code Block](/components/code-block.md): CoarCodeBlock — syntax-highlighted code display with copy-to-clipboard button, collapsible behavior, line numbers, title label and color variants. - [Divider](/components/divider.md): CoarDivider — horizontal separator with optional slotted label, left/center/right alignment, subtle or strong weight and spacing controls. - [Link](/components/link.md): CoarLink — styled anchor for router and external navigation with accent/subtle variants, three sizes, safe new-tab defaults and disabled handling - [Note](/components/note.md): CoarNote — callout for supplementary information with six semantic color variants, three padding sizes and rich HTML slot content - [Notice](/components/notice.md): CoarNotice — compact inline notices and application banners with six semantic variants - [Progress Bar](/components/progress-bar.md): CoarProgressBar — determinate and indeterminate progress indicator with semantic color variants, three sizes, optional value display and accessible labels - [Spinner](/components/spinner.md): CoarSpinner — animated loading indicator for operations of unknown duration, with four sizes, accessible labels and full-page overlay patterns - [Table](/components/table.md): CoarTable — lightweight styled table wrapper with striped, plain and bordered variants, compact padding, hover highlighting and rich cell content - [Tag](/components/tag.md): CoarTag — label chip with six semantic color variants, three sizes, closable and selectable modes for metadata, categories and filter bars ### Navigation - [Menu](/components/menu.md): CoarMenu — context menus and action lists with full keyboard support, icons, headings, dividers, nested and flyout submenus and router-aware link items - [Context Menu](/components/context-menu.md): CoarContextMenu with useContextMenu — right-click menu at the pointer position with viewport clamping, submenus, flyouts and auto-close behavior. - [Sidebar](/components/sidebar.md): CoarSidebar — navigation sidebar with header/content/footer sections, collapsible icon-only mode, expand and flyout groups, four-side orientation and router-aware items - [Navbar](/components/navbar.md): CoarNavbar — top-level navigation bar with start, center and end content slots, elevated shadow by default or a flat bordered variant - [Tabs](/components/tabs.md): CoarTabGroup and CoarTab — v-model tab navigation with disabled tabs, tab-bar actions slot, fill-height mode and full keyboard support - [Tree](/components/tree.md): CoarTree — generic tree primitive with keyboard navigation, drag-and-drop reorder, single/multiple/checkbox selection, context menus, lazy loading and a fluent useTree builder - [Breadcrumb](/components/breadcrumb.md): CoarBreadcrumb — hierarchical navigation trail with router-aware links, non-interactive active item, icons and automatic render-mode selection per crumb. - [Pagination](/components/pagination.md): CoarPagination — page navigation computed from totalItems and pageSize with ellipsis truncation, first/last buttons and localized aria-labels ### Layout - [Panel Layout ](/components/panel-layout.md): CoarSplitPane and CoarPanelLayout — resizable split panes and a VS-Code-style workbench shell with top/left/content/right/bottom/status regions - [Wizard ](/components/wizard.md): CoarWizard — multi-step flow shell for modals with animated body resize, scrollable auto-centering step indicator, edge-placeable progress strip and step gating ### Overlay - [Dialog](/components/dialog.md): useDialog — promise-based modal dialogs for confirm, alert and custom components, with configurable buttons, sizes and localized labels. - [Popover](/components/popover.md): CoarPopover — anchored panel for rich interactive content with hover, click or combined trigger modes and automatic viewport-aware positioning - [Popconfirm](/components/popconfirm.md): CoarPopconfirm — inline confirmation bubble anchored to a trigger element, with confirm/cancel actions, danger variant, custom labels and placement control - [Toast](/components/toast.md): useToast and CoarToastContainer — non-blocking notification service with semantic variants, duration and position control, action buttons and progress indicator - [Tooltip](/components/tooltip.md): v-tooltip directive — text-only hover and focus hints for any element, with placement options and accessible labels for icon buttons ### Utilities - [Transitions](/components/transitions.md): CoarFade, CoarSlide, CoarScale, CoarCollapse — pre-built Vue transition wrappers on design-system motion tokens with duration presets and prefers-reduced-motion support - [Virtual List](/components/virtual-list.md): useVirtualList — composable that virtualizes large scrollable lists, rendering only visible rows with overscan, variable item heights and scrollToIndex - [Drag & Drop](/components/drag-drop.md): useDragDrop — HTML5 drag-and-drop composable with group, accept and canDrop matching rules for building custom drag surfaces like Kanban boards. - [Fragment Parser & Modal Routing](/components/fragment-parser.md): @cocoar/vue-fragment-parser — parses URL hash fragments into typed routes with parameters; composables enable deep-linkable modals with browser-back to close ### Content - [Markdown](/components/markdown.md): @cocoar/vue-markdown — markdown rendering split into a framework-agnostic parser (markdown-core) and the CoarMarkdown Vue component with GFM support - [Markdown Editor ](/components/markdown-editor.md): CoarMarkdownEditor — Milkdown-based WYSIWYG markdown editor with lossless round-trip, floating or fixed toolbar and a render registry shared with CoarMarkdown - [Custom Embeds ](/components/markdown-embeds.md): Markdown custom embeds — register Vue components rendered from :::key{props} directives in both viewer and editor, with lossless round-trip to plain text - [Diagrams ](/components/markdown-diagrams.md): @cocoar/vue-markdown-mermaid — renders mermaid code fences in CoarMarkdown as Cocoar-themed diagrams; lazy-loaded, strict security, degrades to plain code blocks - [Mermaid Diagram ](/components/mermaid.md): CoarMermaidDiagram — standalone Mermaid diagram component for Vue 3 rendering from a source string; Cocoar-themed, lazily loaded, with opt-in zoom/pan - [Script Editor](/components/script-editor.md): @cocoar/vue-script-editor — Monaco-based TypeScript/JavaScript/JSON editor with v-model, custom type definitions, constrained mode with protected lines and automatic theming ### Data Grid - [Data Grid](/components/data-grid.md): CoarDataGrid — AG Grid-based data grid with fluent builder API, locale-aware column types, wrapper-column decorations and Cocoar theming with dark mode. - [Editing](/components/data-grid/editing.md): CoarDataGrid in-cell editing — editable() with per-row predicates, custom Vue editors via cellEditorConfig, and onCellValueChanged for committed edits. - [Text Column](/components/data-grid/text.md): CoarDataGrid text column — col.text() edits cells with CoarTextInput via CoarTextCellEditor, with placeholder, maxLength, and per-row editable gating. - [Number Column](/components/data-grid/number.md): CoarDataGrid number column — col.number() formats locale-aware and edits with CoarNumberCellEditor supporting min/max, decimals, step, and stepper buttons. - [Select Column](/components/data-grid/select.md): CoarDataGrid select column — col.select() renders the matched option label and edits via CoarSelect with auto-commit on pick, clearable, searchable, and row-aware options. - [Multi-Select & Tag-Select Columns ](/components/data-grid/multi-select.md): CoarDataGrid multi-value columns — col.multiSelect() and col.tagSelect() edit array cells via CoarMultiSelect or CoarTagSelect, with chips display, search, and allowCreate. - [Date Columns ](/components/data-grid/date-columns.md): CoarDataGrid date columns — col.plainDate/plainDateTime/zonedDateTime render Temporal values locale-aware and edit via the matching Cocoar date-time picker. - [Checkbox Column](/components/data-grid/checkbox.md): CoarDataGrid checkbox column — col.checkbox() renders a read-only CoarCheckbox per cell, with opt-in edit-mode toggling, per-row gating, and indeterminate tri-state. ### Page Builder (Preview) - [Page Builder ](/components/page-builder.md): Overview of @cocoar/vue-page-builder, a headless visual page composition framework: consumer-defined element registry, portable JSON schemas, shared PageConfig for builder and renderer. - [`` ](/components/page-builder/coar-page-builder.md): CoarPageBuilder visual editor: outline and properties inspector, drag-and-drop canvas, searchable element library and reusable compositions, emitting a PageNode JSON schema via v-model. - [`` ](/components/page-builder/coar-page-renderer.md): CoarPageRenderer turns a PageNode schema into live Cocoar components at runtime, enforcing the allowedElements security boundary with actions, validation and initialValues. - [Authoring contract](/components/page-builder/authoring-contract.md) - [Custom elements](/components/page-builder/custom-elements.md): Registering consumer element types via PageElementDefinition: props-bag wire format, runtime renderer with usePageElement, plus palette, preview and inspector integration. - [IDP integration](/components/page-builder/idp-integration.md): Integrate Page Builder 2.20 into an identity provider with isolated SES Worker sessions, host-owned capabilities, versioned documents and server-authoritative publication. ### Document Viewer (Preview) - [Document Viewer ](/components/document-viewer.md): Source-agnostic document viewer for Vue 3 — CoarDocumentViewer renders PDFs, images, and image galleries with shared toolbar chrome, side panels, and an annotation layer. - [CoarDocumentViewer](/components/document-viewer/coar-document-viewer.md): CoarDocumentViewer component reference — the source prop, toolbar and side-panel chrome toggles, annotation surface props, and v-model panel open state. - [Toolbar customization](/components/document-viewer/toolbar.md): CoarDocumentViewer toolbar customization — the order-driven tools array of tool identifiers, separator trimming rules, and the full CoarDocumentViewerTool reference. - [Annotations](/components/document-viewer/annotations.md): CoarDocumentViewer annotation layer — controlled marker, comment, ink, and freetext annotations; the consumer owns the data and applies create/update/delete events. ### Map (Preview) - [Map ](/components/map.md): CoarMap, a standalone data-driven Leaflet map for Vue 3 that renders pins, routes, popups and a legend from MapData plus MapConfig. - [Map Editor ](/components/map/editor.md): CoarMapEditor, the write counterpart of CoarMap: place, move, edit, reorder and delete points visually, emitting fresh MapData via v-model. ### File Explorer (Preview) - [File Explorer ](/components/file-explorer.md): Headless VSCode-style file explorer engine for Vue 3 — useFileExplorer drives a pluggable AssetStore backend; you compose the layout from @cocoar/vue-ui primitives. - [useFileExplorer](/components/file-explorer/use-file-explorer.md): useFileExplorer composable reference — options, reactive tree and tab state, imperative ops, and navigation returned by the file-explorer engine. - [AssetStore\ contract](/components/file-explorer/asset-store.md): AssetStore contract for the file-explorer engine — the backend-agnostic read/write interface (loadTree, uploadFile, rename, move) with optional lazy and browse-only modes. - [In-memory store](/components/file-explorer/in-memory-store.md): createInMemoryAssetStore — the reference AssetStore implementation with reactive latency, failure, lazy, and conflict knobs for demos, tests, and prototyping. ### Calendar (Preview) - [Calendar ](/components/calendar.md): @cocoar/vue-calendar — Temporal-based Vue 3 calendar with Year, Month, Week, Day and Agenda views, iOS-style display variations, recurrence and standalone sub-views - [`` — Composer ](/components/calendar/coar-calendar.md): CoarCalendar — top-level calendar shell wiring the iOS-style Year, Month, Day and Agenda hierarchy plus Week and Work Week, driven by the chainable useCalendar builder - [`` — Year View ](/components/calendar/year-view.md): CoarYearView — responsive twelve-month calendar overview with today marker and drill-in to the continuous Month view - [Month Views ](/components/calendar/month-view.md): Month views — continuously scrolling Compact, Stacked and Details months, responsive Month List, and the lower-level CoarMonthView section - [`` — Day View ](/components/calendar/day-view.md): CoarDayView — one-day or width-aware multi-day time grid with hour axis, all-day band, configurable columns, time range and slot duration - [`` — Week View ](/components/calendar/week-view.md): CoarWeekView — 7-day time-grid calendar view with hour axis, all-day band, locale-aware first day of week and a customizable day-header slot - [`` — Work Week View ](/components/calendar/work-week-view.md): CoarWorkWeekView — week view filtered to a configurable working-day set (default Mon-Fri), supporting 6-day, 4-day and Sun-Thu weeks on the same time grid - [`` — Agenda View ](/components/calendar/agenda-view.md): CoarAgendaView — virtualized chronological agenda list grouped by day, with floating day headers, multi-day event continuation and imperative scroll-to-date - [`` — Timeline View ](/components/calendar/timeline-view.md): CoarTimelineView — Gantt-lite timeline with one row per event, horizontal time-axis bars, automatic recurring-series row collapsing and drag-to-pan window - [Performance baseline ](/components/calendar/performance.md): Performance baseline for @cocoar/vue-calendar — Long Animation Frame measurements and targets for virtualization, 2D scrolling and drag-and-drop with auto-scroll ### Other - [Untitled](/foundations/kitchen-sink.md): Every Cocoar component rendered on a single page for side-by-side inspection and light versus dark theme comparison.