# 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)
- [Error Handling](/guide/error-handling.md)
- [Theming](/guide/theming.md)
- [Changelog](/guide/changelog.md)

### Foundations

- [Design Principles](/foundations/design-principles.md)
- [Colors](/foundations/colors.md)
- [Typography](/foundations/typography.md)
- [Spacing & Effects](/foundations/spacing.md)
- [Icons](/foundations/icons.md)
- [Motion](/foundations/motion.md)

#### Localization

- [Localization Setup](/foundations/localization/setup.md)
- [Formatting](/foundations/localization/formatting.md)
- [Translations](/foundations/localization/translations.md)
- [Timezones](/foundations/localization/timezones.md)

### Guide

- [Getting Started](/guide/getting-started.md)
- [Error Handling](/guide/error-handling.md)
- [Theming](/guide/theming.md)
- [Changelog](/guide/changelog.md)

### Foundations

- [Design Principles](/foundations/design-principles.md)
- [Colors](/foundations/colors.md)
- [Typography](/foundations/typography.md)
- [Spacing & Effects](/foundations/spacing.md)
- [Icons](/foundations/icons.md)
- [Motion](/foundations/motion.md)

#### Localization

- [Localization Setup](/foundations/localization/setup.md)
- [Formatting](/foundations/localization/formatting.md)
- [Translations](/foundations/localization/translations.md)
- [Timezones](/foundations/localization/timezones.md)

### Form Controls

- [Button](/components/button.md)
- [Form Field](/components/form-field.md)
- [Text Input](/components/text-input.md)
- [Number Input](/components/number-input.md)
- [Password Input](/components/password-input.md)
- [OTP Input ](/components/otp-input.md)
- [Select](/components/select.md)
- [Listbox](/components/listbox.md)
- [Dual Listbox](/components/dual-listbox.md)
- [Checkbox](/components/checkbox.md)
- [Radio Group](/components/radio-group.md)
- [Switch](/components/switch.md)
- [Date Picker](/components/date-picker.md)
- [DateTime Picker](/components/date-time-picker.md)
- [Zoned DateTime Picker](/components/zoned-date-time-picker.md)
- [Date Views ](/components/date-views.md)

### Display

- [Avatar](/components/avatar.md)
- [Badge](/components/badge.md)
- [Card](/components/card.md)
- [Code Block](/components/code-block.md)
- [Divider](/components/divider.md)
- [Link](/components/link.md)
- [Note](/components/note.md)
- [Progress Bar](/components/progress-bar.md)
- [Spinner](/components/spinner.md)
- [Table](/components/table.md)
- [Tag](/components/tag.md)

### Navigation

- [Menu](/components/menu.md)
- [Context Menu](/components/context-menu.md)
- [Sidebar](/components/sidebar.md)
- [Navbar](/components/navbar.md)
- [Tabs](/components/tabs.md)
- [Segmented Control](/components/segmented-control.md)
- [Breadcrumb](/components/breadcrumb.md)
- [Pagination](/components/pagination.md)

### Overlay

- [Dialog](/components/dialog.md)
- [Popover](/components/popover.md)
- [Popconfirm](/components/popconfirm.md)
- [Toast](/components/toast.md)
- [Tooltip](/components/tooltip.md)

### Utilities

- [Transitions](/components/transitions.md)
- [Virtual List](/components/virtual-list.md)
- [Drag & Drop](/components/drag-drop.md)
- [Fragment Parser & Modal Routing](/components/fragment-parser.md)

### Content

- [Markdown](/components/markdown.md)
- [Markdown Editor ](/components/markdown-editor.md)
- [Script Editor](/components/script-editor.md)

### Data Grid

- [Data Grid](/components/data-grid.md)
- [Editing](/components/data-grid/editing.md)
- [Text Column](/components/data-grid/text.md)
- [Number Column](/components/data-grid/number.md)
- [Select Column](/components/data-grid/select.md)
- [Multi-Select & Tag-Select Columns ](/components/data-grid/multi-select.md)
- [Date Columns ](/components/data-grid/date-columns.md)
- [Checkbox Column](/components/data-grid/checkbox.md)

### Calendar (Preview)

- [Calendar ](/components/calendar.md)
- [`<CoarCalendar>` — Composer&#x20;](/components/calendar/coar-calendar.md)
- [`<CoarDayView>` — Day View&#x20;](/components/calendar/day-view.md)
- [`<CoarWeekView>` — Week View&#x20;](/components/calendar/week-view.md)
- [`<CoarWorkWeekView>` — Work Week View&#x20;](/components/calendar/work-week-view.md)
- [`<CoarMonthView>` — Month View&#x20;](/components/calendar/month-view.md)
- [`<CoarAgendaView>` — Agenda View&#x20;](/components/calendar/agenda-view.md)
- [`<CoarTimelineView>` — Timeline View&#x20;](/components/calendar/timeline-view.md)
- [Performance baseline&#x20;](/components/calendar/performance.md)

### Other

- [Untitled](/foundations/kitchen-sink.md)