FernandoJVideira
Santarém, Capital das Góticas, Portugal
Software Engineer | Entrepreneur
Joined on 2025-08-01
Block a user
@fernandojvideira/vue-ui-kit (0.4.1)
Published 2026-10-08 22:42:22 +00:00 by FernandoJVideira
Installation
@fernandojvideira:registry=https://git.fernandovideira.com/api/packages/FernandoJVideira/npm/npm install @fernandojvideira/[email protected]"@fernandojvideira/vue-ui-kit": "0.4.1"About this package
Shared, configurable Vue 3 component library built on shadcn-vue conventions (reka-ui + class-variance-authority + Tailwind).
vue-ui-kit
A shared, configurable Vue 3 component library built on shadcn-vue conventions: components are plain .vue files you own and can edit, styled with Tailwind, using reka-ui for headless behavior and class-variance-authority for variants.
Docs
| Install & setup | Adding this to a Vue or Nuxt project, wiring up Tailwind v4, SSR notes. |
| Theming & customizing | Setting your brand color, overriding a component's markup, dark mode. |
| Examples | Full usage for every bigger component — Navbar, Dashboard, DropdownMenu, Carousel, and more. |
| Component props reference | Every prop, its type, and its default — one table per component. |
| pnpm monorepo setup | Using this inside a pnpm workspace instead of a single-package project. |
| Contributing | Developing the library itself: project layout, adding a new component, versioning. |
Quick start
Published as @fernandojvideira/vue-ui-kit on the Gitea registry at git.fernandovideira.com — no SSH key needed, just a personal access token. One-time setup per machine, in ~/.npmrc:
@fernandojvideira:registry=https://git.fernandovideira.com/api/packages/FernandoJVideira/npm/
//git.fernandovideira.com/api/packages/FernandoJVideira/npm/:_authToken=<your token>
Then in your project:
npm install @fernandojvideira/vue-ui-kit # see "Install & setup" for the git/local alternatives
npm install -D tailwindcss @tailwindcss/vite
/* src/style.css */
@import 'tailwindcss';
@source '../node_modules/@fernandojvideira/vue-ui-kit/src';
@import '@fernandojvideira/vue-ui-kit/theme.css';
<script setup>
import { Button } from '@fernandojvideira/vue-ui-kit'
</script>
<template>
<Button>Click me</Button>
</template>
That's the whole setup. If a component looks unstyled, it's almost always the @source line above pointing at the wrong path — see Install & setup for the full explanation, the token setup, and the Nuxt equivalent.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @lucide/vue | ^1.53.0 |
| chart.js | ^4.5.1 |
| class-variance-authority | ^0.7.1 |
| clsx | ^2.1.1 |
| dompurify | ^3.4.15 |
| embla-carousel | ^8.6.0 |
| embla-carousel-vue | ^8.6.0 |
| marked | ^18.0.13 |
| reka-ui | ^2.10.0 |
| tailwind-merge | ^3.6.0 |
| tailwindcss-animate | ^1.0.7 |
| vue-chartjs | ^5.3.4 |
| vue-sonner | ^2.0.9 |
Development Dependencies
| ID | Version |
|---|---|
| @tailwindcss/vite | ^4.3.3 |
| @vitejs/plugin-vue | ^6.0.8 |
| tailwindcss | ^4.3.3 |
| typescript | ^5.7.0 |
| vite | ^7.0.0 |
| vue | ^3.5.42 |
| vue-tsc | ^3.0.0 |
Peer Dependencies
| ID | Version |
|---|---|
| vue | ^3.4.0 |