@equal-experts/kuat-vue

Custom Vue components and blocks for the Kuat Design System.

---

Architecture

This package provides custom components and blocks that are unique to Kuat. For standard UI components (Button, Dialog, etc.), install them directly via shadcn-vue CLI with kuat-core theming.

``
┌─────────────────────────────────────────────────────┐
│ Your Application │
├─────────────────────────────────────────────────────┤
│ Kuat Blocks (from this package) │
├─────────────────────────────────────────────────────┤
│ Kuat Components (from this package) │
├─────────────────────────────────────────────────────┤
│ shadcn-vue Components (installed directly) │
├─────────────────────────────────────────────────────┤
│ @equal-experts/kuat-core (design tokens) │
└─────────────────────────────────────────────────────┘
`

---

Installation

`bash


Using pnpm (recommended)

pnpm add @equal-experts/kuat-vue

Using npm

npm install @equal-experts/kuat-vue

Using yarn

yarn add @equal-experts/kuat-vue
`

$3

`bash
pnpm add vue radix-vue reka-ui
`

---

What's Included

$3

Components unique to Kuat, not available in shadcn-vue:

| Component | Description |
|-----------|-------------|
| ButtonGroup | Groups buttons together with proper styling |
| ButtonGroupText | Text element within a button group |
| ButtonGroupSeparator | Separator between button group items |

$3

Pre-built compositions for common patterns:

| Block | Description |
|-------|-------------|
| KuatHeader | Brand header with logo, navigation, actions |
| KuatFooter | Brand footer with links and legal |
| KuatSearchPattern | Search input with suggestions |

$3

| Utility | Description |
|---------|-------------|
| cn() | Class name merger using clsx + tailwind-merge |

---

Recommended Setup

For the best experience, combine this package with kuat-core and shadcn-vue:

$3

`bash
pnpm add @equal-experts/kuat-core @equal-experts/kuat-vue
`

$3

`typescript
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import kuatPreset from '@equal-experts/kuat-core';

export default {
presets: [kuatPreset],
content: [
'./src/*/.{vue,js,ts}',
'./node_modules/@equal-experts/kuat-vue/*/.{vue,js,ts}',
],
} satisfies Config;
`

$3

`typescript
// main.ts
import { createApp } from 'vue';
import '@equal-experts/kuat-core/variables.css';
import App from './App.vue';

createApp(App).mount('#app');
`

$3

`bash
npx shadcn-vue@latest init
npx shadcn-vue@latest add button dialog dropdown-menu
`

$3

`vue



`

---

Component Examples

$3

Groups buttons together with seamless borders:

`vue



`

$3

Merge class names with Tailwind conflict resolution:

`vue



`

---

Migration Guide

If you were importing standard components from this package, migrate to direct shadcn-vue installation:

$3

`vue

`

$3

`vue

`

$3

1. Ensure @equal-experts/kuat-core is installed
2. Initialize shadcn-vue: npx shadcn-vue@latest init
3. Install needed components: npx shadcn-vue@latest add button dialog badge
4. Update imports to use local components
5. Keep imports for Kuat-specific components (ButtonGroup, etc.)

---

Deprecated Exports

The following exports are deprecated and will be removed in the next major version. Install them directly via shadcn-vue CLI instead:

| Component | Replacement |
|-----------|-------------|
| Button | npx shadcn-vue@latest add button |
| Accordion | npx shadcn-vue@latest add accordion |
| AlertDialog | npx shadcn-vue@latest add alert-dialog |
| Badge | npx shadcn-vue@latest add badge |

These components are still exported for backward compatibility but will be themed correctly only when using kuat-core.

---

TypeScript Support

All components are fully typed:

`vue

`

---

Dark Mode

Dark mode is supported via the .dark class on your root element:

`vue



``

Components automatically adapt when using kuat-core design tokens.

---

Related Documentation

- Consumer Setup Guide
- kuat-core Integration
- Component Patterns
- shadcn-vue Documentation