{"id":16542465,"url":"https://github.com/tada5hi/vuecs","last_synced_at":"2026-06-08T22:00:37.394Z","repository":{"id":37397666,"uuid":"427694861","full_name":"tada5hi/vuecs","owner":"tada5hi","description":"This repository contains different packages, which provides different minimal vue components.","archived":false,"fork":false,"pushed_at":"2026-06-04T17:00:39.000Z","size":85264,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-04T17:09:16.845Z","etag":null,"topics":["components","hyperscript","layout","multi-tier","navbar","navigation","navigation-menu","pagination","vue","vue-layout"],"latest_commit_sha":null,"homepage":"https://vuecs.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tada5hi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["tada5hi"]}},"created_at":"2021-11-13T14:59:17.000Z","updated_at":"2026-06-03T09:24:35.000Z","dependencies_parsed_at":"2023-02-10T16:15:36.707Z","dependency_job_id":"8482e6ee-78d7-4ec2-a010-17c9d0d18cf6","html_url":"https://github.com/tada5hi/vuecs","commit_stats":null,"previous_names":["tada5hi/vue-layout-navigation","tada5hi/vue-layout"],"tags_count":402,"template":false,"template_full_name":null,"purl":"pkg:github/tada5hi/vuecs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tada5hi%2Fvuecs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tada5hi%2Fvuecs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tada5hi%2Fvuecs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tada5hi%2Fvuecs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tada5hi","download_url":"https://codeload.github.com/tada5hi/vuecs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tada5hi%2Fvuecs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34082130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","hyperscript","layout","multi-tier","navbar","navigation","navigation-menu","pagination","vue","vue-layout"],"created_at":"2024-10-11T18:57:36.895Z","updated_at":"2026-06-08T22:00:37.368Z","avatar_url":"https://github.com/tada5hi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/tada5hi"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://vuecs.dev/logo.svg\" alt=\"Vuecs\" width=\"96\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eVuecs\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA Vue 3 theming framework with shipped components.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Tada5hi/vuecs/actions/workflows/main.yml\"\u003e\u003cimg src=\"https://github.com/Tada5hi/vuecs/actions/workflows/main.yml/badge.svg\" alt=\"CI\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://snyk.io/test/github/Tada5hi/vuecs\"\u003e\u003cimg src=\"https://snyk.io/test/github/Tada5hi/vuecs/badge.svg\" alt=\"Known Vulnerabilities\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits\u0026logoColor=white\" alt=\"Conventional Commits\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n**Table of Contents**\n\n- [Overview](#overview)\n- [Getting Started](#getting-started)\n- [Components](#components)\n- [Themes](#themes)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Overview\n\nVuecs is organized into five kinds of packages:\n\n- **Components** (`@vuecs/button`, `@vuecs/forms`, `@vuecs/list`, `@vuecs/overlays`, …) — render logic, props, slots, and structural `vc-*` classes. Visually unstyled by default.\n- **Themes** (`@vuecs/theme-tailwind`, `@vuecs/theme-bootstrap`, `@vuecs/theme-bulma`) — pure data objects mapping component slots (e.g. `listItem.root`, `pagination.link`) to CSS class strings. Swap, compose, or override themes without touching component code.\n- **Icon presets** (`@vuecs/icons-lucide`, `@vuecs/icons-font-awesome`) — Iconify-name vocabularies that populate the semantic icon-prop slots on components like `VCPagination` and `VCButton`. Configured separately from themes via `icons: [...]`.\n- **Design tokens** (`@vuecs/design`) — CSS custom properties (`--vc-color-*`, `--vc-radius-*`, motion primitives) plus theme-agnostic `useColorMode` / `useColorPalette` composables. Drives runtime palette switching across every theme.\n- **Framework integrations** (`@vuecs/nuxt`) — SSR-safe color-mode + palette plugins, auto-imports, and module-level configuration for Nuxt apps.\n\nThemes are resolved at runtime by `@vuecs/core`'s theme manager through four layers: component defaults → themes (in array order) → global overrides → per-instance `themeClass` prop.\n\n## Getting Started\n\n```bash\nnpm install @vuecs/core @vuecs/theme-bootstrap @vuecs/icon @vuecs/icons-lucide\n```\n\n```typescript\nimport vuecs, { extend } from '@vuecs/core';\nimport bootstrap from '@vuecs/theme-bootstrap';\nimport lucide from '@vuecs/icons-lucide';\n\napp.use(vuecs, {\n    themes: [bootstrap()],\n    icons:  [lucide()],\n    overrides: {\n        elements: { listItem: { classes: { root: extend('border-bottom') } } },\n    },\n});\n```\n\nSee [`@vuecs/core`](./packages/core/README.md) for the full theme API (`installThemeManager`, `useComponentTheme`, `extend()`, variant system).\n\n## Components\n\n### `@vuecs/core`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fcore.svg)](https://badge.fury.io/js/@vuecs%2Fcore)\n\nTheme resolution engine and component infrastructure. Exports `installThemeManager`, `useComponentTheme`, `extend()`, `resolveComponentTheme`, and shared types. Required by every component and theme package.\n\n[Full documentation](./packages/core/README.md)\n\n### `@vuecs/design`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fdesign.svg)](https://badge.fury.io/js/@vuecs%2Fdesign)\n\nCSS design tokens (`--vc-color-*`, `--vc-radius-*`), motion primitives (vanilla-CSS port of `tw-animate-css`), and theme-agnostic `useColorMode` / `useColorPalette` composables. Pair with `@vuecs/design/standalone` for Bootstrap or Bulma stacks that don't load Tailwind.\n\n[Full documentation](./packages/design/README.md)\n\n### `@vuecs/button`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fbutton.svg)](https://badge.fury.io/js/@vuecs%2Fbutton)\n\nGeneral-purpose `\u003cVCButton\u003e` with `variant` / `color` / `size` axes, loading state, and leading/trailing icon slots.\n\n[Full documentation](./packages/button/README.md)\n\n### `@vuecs/elements`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Felements.svg)](https://badge.fury.io/js/@vuecs%2Felements)\n\nAtomic, presentation-only UI elements — `VCSeparator`, `VCTag` / `VCTags`, `VCAvatar`, `VCAspectRatio`, `VCVisuallyHidden`, `VCBadge`. Pure-CSS or thin Reka wrappers.\n\n[Full documentation](./packages/elements/README.md)\n\n### `@vuecs/overlays`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Foverlays.svg)](https://badge.fury.io/js/@vuecs%2Foverlays)\n\nCompound overlays on Reka primitives — Modal (with `useModal()` view-stack composable), Popover, HoverCard, Tooltip, DropdownMenu, ContextMenu.\n\n[Full documentation](./packages/overlays/README.md)\n\n### `@vuecs/icon`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Ficon.svg)](https://badge.fury.io/js/@vuecs%2Ficon)\n\n`\u003cVCIcon\u003e` — thin Iconify wrapper for vuecs's icon-string-prop slots and consumer slot content.\n\n[Full documentation](./packages/icon/README.md)\n\n### `@vuecs/list`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Flist.svg)](https://badge.fury.io/js/@vuecs%2Flist)\n\nCompound list (`VCList` / `VCListBody` / `VCListItem` / `VCListEmpty` / `VCListLoading`) with the `defineList()` factory, `useList()` / `useListItem()` injectors, and built-in `v-model:selection` (single / multi, ARIA listbox). Header / footer / item-text / item-actions are consumer markup driven by slot-prop class strings.\n\n```vue\n\u003cVCList :data=\"items\" :busy=\"loading\" v-model:selection=\"selected\"\u003e\n    \u003ctemplate #default=\"{ classes }\"\u003e\n        \u003cheader :class=\"classes.header\"\u003e…\u003c/header\u003e\n        \u003cVCListBody\u003e\n            \u003cVCListItem v-for=\"item in items\" :key=\"item.id\" :value=\"item\"\u003e\n                \u003ctemplate #default=\"{ classes }\"\u003e\n                    \u003cspan :class=\"classes.text\"\u003e{{ item.name }}\u003c/span\u003e\n                \u003c/template\u003e\n            \u003c/VCListItem\u003e\n        \u003c/VCListBody\u003e\n    \u003c/template\u003e\n\u003c/VCList\u003e\n```\n\n[Full documentation](./packages/list/README.md)\n\n### `@vuecs/forms`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fforms.svg)](https://badge.fury.io/js/@vuecs%2Fforms)\n\nForm inputs on Reka UI primitives, with validation support: Checkbox + CheckboxGroup, Switch, Radio + RadioGroup, Input, Number, Pin, Select + SelectSearch, Slider (single + range), Tags, Textarea.\n\n```vue\n\u003cVCFormGroup label-content=\"Email\" :validation-messages=\"errors\"\u003e\n    \u003cVCFormInput v-model=\"form.email\" type=\"email\" /\u003e\n\u003c/VCFormGroup\u003e\n```\n\n[Full documentation](./packages/forms/README.md)\n\n### `@vuecs/pagination`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fpagination.svg)](https://badge.fury.io/js/@vuecs%2Fpagination)\n\nPagination component with page calculation utilities and Iconify-backed icon props.\n\n```vue\n\u003cVCPagination :total=\"100\" :limit=\"10\" :offset=\"0\" @load=\"onPageChange\" /\u003e\n```\n\n[Full documentation](./packages/pagination/README.md)\n\n### `@vuecs/navigation`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fnavigation.svg)](https://badge.fury.io/js/@vuecs%2Fnavigation)\n\nMulti-level navigation with `NavigationManager`, path-based active matching, and `vue-router` integration.\n\n[Full documentation](./packages/navigation/README.md)\n\n### `@vuecs/countdown`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fcountdown.svg)](https://badge.fury.io/js/@vuecs%2Fcountdown)\n\nCountdown timer with auto-start, visibility handling, and a scoped slot for custom display.\n\n[Full documentation](./packages/countdown/README.md)\n\n### `@vuecs/gravatar`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fgravatar.svg)](https://badge.fury.io/js/@vuecs%2Fgravatar)\n\nGravatar avatar component.\n\n[Full documentation](./packages/gravatar/README.md)\n\n### `@vuecs/link`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Flink.svg)](https://badge.fury.io/js/@vuecs%2Flink)\n\nRouter-aware link with automatic detection of `vue-router` or Nuxt.\n\n[Full documentation](./packages/link/README.md)\n\n### `@vuecs/timeago`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Ftimeago.svg)](https://badge.fury.io/js/@vuecs%2Ftimeago)\n\nRelative time display with locale support and auto-update.\n\n[Full documentation](./packages/timeago/README.md)\n\n### `@vuecs/nuxt`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Fnuxt.svg)](https://badge.fury.io/js/@vuecs%2Fnuxt)\n\nTheme-agnostic Nuxt module — auto-imports `@vuecs/design` tokens, ships SSR-safe color-mode + palette plugins (`useColorMode` / `useColorPalette` auto-imports), and optionally auto-installs themes listed under `vuecs: { themes: [...] }`.\n\n[Full documentation](./packages/nuxt/README.md)\n\n## Themes\n\nThemes are functions returning `{ elements, classesMergeFn? }`. Multiple themes compose in array order. Themes resolve **CSS class strings only** — icon glyphs are provided separately by [icon presets](#icons) (`@vuecs/icons-lucide`, `@vuecs/icons-font-awesome`, …) configured under `icons:`. Themes only depend on `@vuecs/core`; the class strings they provide target whichever component packages the consumer has installed.\n\n### `@vuecs/theme-bootstrap`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Ftheme-bootstrap.svg)](https://badge.fury.io/js/@vuecs%2Ftheme-bootstrap)\n\nBootstrap class defaults (`form-control`, `btn btn-primary`, `d-flex`, …) for every component. Currently targets Bootstrap 5; renamed from `@vuecs/theme-bootstrap-v5` in 3.0 (clean break — no shim). The previous `@vuecs/theme-bootstrap-v4` package was removed in the same release; Bootstrap 4's Sass-compiled stylesheet didn't benefit from the design-token bridge.\n\n```typescript\nimport bootstrap from '@vuecs/theme-bootstrap';\n\napp.use(vuecs, { themes: [bootstrap()] });\n```\n\n### `@vuecs/theme-tailwind`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Ftheme-tailwind.svg)](https://badge.fury.io/js/@vuecs%2Ftheme-tailwind)\n\nTailwind CSS utility-class defaults for every component. Ships with `tailwind-merge` pre-wired as the theme's `classesMergeFn` so `extend()` calls in overrides merge cleanly, and exports a typed `merge: ClassesMergeFn` helper for reuse at the global overrides layer.\n\n```typescript\nimport tailwind, { merge } from '@vuecs/theme-tailwind';\n\napp.use(vuecs, {\n    themes: [tailwind()],\n    overrides: { classesMergeFn: merge },\n});\n```\n\n### `@vuecs/theme-bulma`\n\n[![npm version](https://badge.fury.io/js/@vuecs%2Ftheme-bulma.svg)](https://badge.fury.io/js/@vuecs%2Ftheme-bulma)\n\nBulma 1.0+ theme — class strings (`button is-primary`, `input`, `dropdown-content`, …) for every component, plus an optional design-token bridge (`@import \"@vuecs/theme-bulma\"`) that wires `--bulma-*` onto `--vc-color-*`.\n\n```typescript\nimport bulma from '@vuecs/theme-bulma';\n\napp.use(vuecs, { themes: [bulma()] });\n```\n\n## Icons\n\nIcon vocabularies are configured separately from themes. Pick an Iconify-backed preset (`@vuecs/icons-lucide`, `@vuecs/icons-font-awesome`) to populate the semantic icon-prop slots on `VCPagination`, `VCButton`, etc.\n\n```typescript\nimport vuecs from '@vuecs/core';\nimport bootstrap from '@vuecs/theme-bootstrap';\nimport lucide from '@vuecs/icons-lucide';\n\napp.use(vuecs, {\n    themes: [bootstrap()],\n    icons:  [lucide()],\n});\n```\n\nSee [`@vuecs/icon`](./packages/icon/README.md) for the runtime component (`\u003cVCIcon\u003e`) and the icon delivery options (Nuxt, Vite, SPA).\n\n## Contributing\n\n```bash\nnpm ci\nnpm run build\nnpm run test\nnpm run lint\n```\n\n## License\n\nMade with 💚\n\nPublished under [Apache 2.0 License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftada5hi%2Fvuecs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftada5hi%2Fvuecs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftada5hi%2Fvuecs/lists"}