ChutneyAds Shadcn Vue UI

An installable Vue 3 UI kit that wraps the full shadcn-vue component catalogue together with a few opinionated additions such as the application sidebar primitives. The package is built with Vite, ships ESM/UMD bundles, and publishes TypeScript definitions.

Installation

npm install @chutneyads/shadcn-vue

The library expects a Vue 3 application. vue is listed as a peer dependency so your host project controls the exact runtime version. Components that rely on routing work best with vue-router; pass hasPermission/permissionsLoaded props to the NavMain sidebar helper if you need fine-grained access control.

Tailwind preset

The shared Tailwind preset lives at @chutneyads/shadcn-vue/tailwind-preset. Extend your Tailwind config:

// tailwind.config.js
const chutneyPreset = require('@chutneyads/shadcn-vue/tailwind-preset')

module.exports = {
  presets: [chutneyPreset],
  content: ['index.html', './src/**/*.{js,ts,vue}']
}

The preset depends on @tailwindcss/forms and @tailwindcss/typography; install them in the host app if they are not present already.

Usage

Components are exported from the package root, matching the shadcn grouping. Example:

<script setup lang="ts">
import { Button, Card, CardContent, CardHeader } from '@chutneyads/shadcn-vue'
</script>

<template>
  <Card class="max-w-sm">
    <CardHeader>Onboarding</CardHeader>
    <CardContent>
      <Button>Continue</Button>
    </CardContent>
  </Card>
</template>

Access helpers are also exported:

import { cn, useFormField, sidebarMenuButtonVariants } from '@chutneyads/shadcn-vue'

Development

• npm install – install all build/dev dependencies (peer deps like vue stay under the host).
• npm run typecheck – run vue-tsc in no-emit mode.
• npm run build – emit type declarations under dist/types and the ESM/UMD bundles inside dist/.

The build command is wired to prepublishOnly, so npm publish will always ship a fresh bundle.

*** End Patch