Coar Design System — Vue

Documentation: docs.cocoar.dev/cocoar-ui-vue — live demos, API reference, and design foundations.

Tech Stack

Concern	Tool
Package manager	pnpm (workspaces)
Task orchestration	Turborepo
Framework	Vue 3
Language	TypeScript
Build	Vite (library mode)
Testing	Vitest + @vue/test-utils
Documentation	VitePress
Linting	ESLint (flat config) + Prettier

Repository Structure

cocoar-ui-vue/
├── packages/
│   ├── ui/                @cocoar/vue-ui              Main component library
│   ├── localization/      @cocoar/vue-localization     i18n, L10n, and timezone support
│   ├── data-grid/         @cocoar/vue-data-grid        Data grid component
│   ├── markdown/          @cocoar/vue-markdown         Markdown viewer component (optional)
│   ├── markdown-core/     @cocoar/vue-markdown-core    Markdown parser
│   ├── fragment-parser/   @cocoar/vue-fragment-parser  HTML fragment parsing utilities
│   └── icons/             @cocoar/icons-cli            Icon generation CLI
├── apps/
│   └── docs/              VitePress documentation      Component docs & demos
├── assets/
│   └── icons/             Source SVG icon set
├── scripts/
│   └── icons/             Icon build tooling
├── turbo.json             Turborepo pipeline config
├── tsconfig.base.json     Shared TypeScript config
├── eslint.config.js       ESLint flat config
└── vitest.config.ts       Vitest multi-package config

Components (@cocoar/vue-ui)

Category	Components
Inputs	CoarButton, CoarCheckbox, CoarNumberInput, CoarPasswordInput, CoarRadioGroup, CoarSelect, CoarMultiSelect, CoarTagSelect, CoarSwitch, CoarTextInput
Date & Time	CoarPlainDatePicker, CoarPlainDateTimePicker, CoarZonedDateTimePicker, CoarTimePicker, CoarScrollableCalendar
Navigation	CoarMenu, CoarNavbar, CoarSidebar, CoarBreadcrumb, CoarTabs, CoarPagination
Overlays	CoarDialog, CoarPopover, CoarPopconfirm, CoarToast, CoarTooltip
Display	CoarAvatar, CoarBadge, CoarCard, CoarCodeBlock, CoarDivider, CoarLabel, CoarLink, CoarNote, CoarProgressBar, CoarSpinner, CoarTable, CoarTag
Utilities	CoarIcon, CoarScrollbar

CoarMarkdown is in the optional @cocoar/vue-markdown package.

Getting Started

Prerequisites

• Node.js 22.x (managed via Volta)
• pnpm 10.x

Install

pnpm install

Scripts

Command	Description
pnpm build	Build all packages (topological order)
pnpm test	Run all tests
pnpm lint	Lint all packages
pnpm docs	Start VitePress docs dev server
pnpm build:icons	Rebuild icon components from SVG sources
pnpm format	Format all files with Prettier
pnpm format:check	Check formatting without writing

Adding a New Package

1. Copy an existing package directory (e.g. packages/localization/)
2. Rename and update package.json (name, dependencies)
3. Update tsconfig.json if needed
4. Run pnpm install to link the new package

Cross-Package Dependencies

Use the workspace protocol for inter-library dependencies:

{
  "dependencies": {
    "@cocoar/vue-localization": "workspace:*"
  }
}

Turborepo ensures packages build in the correct topological order.

Contributing

See CONTRIBUTING.md for development guidelines.

License

Apache License 2.0 — Copyright (c) 2026 COCOAR e.U.