ui

@kinora/ui

Shared shadcn-vue design system (components + tokens) consumed by @kinora/web and @kinora/trace-viewer.

Consumed as source (no build step): the consuming app's Vite/Tailwind processes the .vue/.ts files directly.

What's here

• src/components/ui/* - shadcn-vue components (reka-ui based)
• src/lib/utils.ts - cn() (exported as @kinora/ui and @kinora/ui/utils)
• src/theme.css - design tokens, @theme, base layer, and @source for these components. Each consumer imports it after @import 'tailwindcss'.

Consuming

import { cn } from '@kinora/ui'
import { Button } from '@kinora/ui/button'

@import 'tailwindcss';
@import '@kinora/ui/theme.css';

Adding components

pnpm dlx shadcn-vue@latest add <name> writes to src/components/ui/<name>.

Important: because the package is consumed as source, components must use relative imports, not the @/ alias. After adding, rewrite generated imports:

# in packages/ui
grep -rl "@/lib/utils" src/components/ui/<name> \
  | xargs sed -i '' 's#@/lib/utils#../../../lib/utils#g'

(Cross-ui imports @/components/ui/x likewise become relative.) The @/ alias in tsconfig.json exists only so the CLI and editor resolve types.