Custom Vue components and blocks for the Kuat Design System.
npm install @equal-experts/kuat-vueCustom Vue components and blocks for the Kuat Design System.
---
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) │
└─────────────────────────────────────────────────────┘
---
`bashUsing pnpm (recommended)
pnpm 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
Filter:
`$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.
---
- Consumer Setup Guide
- kuat-core Integration
- Component Patterns
- shadcn-vue Documentation