@cjlapao/ui-kit-vue

Vue 3 port of @cjlapao/ui-kit. Same components, same Tailwind design system, same theme/utility layer — the framework-agnostic TypeScript (theme class maps, utils, most types) is shared with the React kit via re-exports from ../common, so both kits stay in sync by construction.

Usage

import { createApp } from "vue";
import { BottomSheetProvider, IconProvider, renderIcon } from "@cjlapao/ui-kit-vue";
import "@cjlapao/ui-kit-vue/styles.css";

<template>
  <IconProvider :render-icon="renderIcon">
    <BottomSheetProvider>
      <Button variant="solid" color="brand" leading-icon="Add">New item</Button>
    </BottomSheetProvider>
  </IconProvider>
</template>

React → Vue API mapping

| React | Vue | | --- | --- | | className prop | class attr (fallthrough, conflict-aware merge) | | children | default slot | | ReactNode props (title, actions, …) | string prop or named slot of the same name | | value + onChange | v-model (modelValue / update:modelValue) | | onClose / onToggle / … | emits: @close, @toggle, … | | hooks (useTheme, useStepper, …) | composables with the same names returning Refs | | IconProvider / BottomSheetProvider contexts | same-named provider components (provide/inject) |

See CONVENTIONS.md for the full conversion rules.

Development

npm install
npm run lint            # vue-tsc typecheck
npm run build           # vite lib build + d.ts
npm run generate:icons  # regenerate vue/src/icons from react/src/icons

Icons are generated — edit react/src/icons/components/*.tsx and re-run npm run generate:icons; never edit vue/src/icons by hand.

Demo

cd demo
npm install
npm run dev   # http://localhost:5175

The demo mirrors the React demo (../demo) page-for-page and consumes the kit source directly via a Vite alias.