@fernandojvideira/vue-ui-kit (0.5.0)

Published 2026-10-10 02:11:02 +00:00 by FernandoJVideira

Set up this registry in your project .npmrc file:

@fernandojvideira:registry=https://git.fernandovideira.com/api/packages/FernandoJVideira/npm/

To install the package using npm, run the following command:

npm install @fernandojvideira/[email protected]

or add it to the package.json file:

"@fernandojvideira/vue-ui-kit": "0.5.0"

For more information on the npm registry, see the documentation.

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

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

Details

npm

2026-10-10 02:11:02 +00:00

43 KiB

Assets (1)

vue-ui-kit-0.5.0.tgz 43 KiB

Versions (4) View all

0.5.1

2026-10-11

0.5.0

2026-10-10

0.4.1

2026-10-08

0.4.0

2026-09-15

@fernandojvideira/vue-ui-kit (0.5.0)

Installation

About this package

vue-ui-kit

Docs

Quick start

Dependencies