Installation

There are two ways to use vuelix. Pick whichever fits. You can mix them, too.

	Copy source (CLI)	npm package
Install	shadcn-vue add …	npm install vuelix
Code lives in	your repo (components/ui/…)	node_modules
Customise	edit anything	props + class
Updates	re-run the CLI	bump the version

npm package

npm install vuelix motion-v

Requires Tailwind CSS v4. Add one line to your CSS entry, after Tailwind:

@import "tailwindcss";
@import "vuelix/tailwind.css";

This tells Tailwind to scan vuelix's components for class names and adds default theme tokens. If you already have a shadcn-vue theme, yours wins automatically.

Import what you need (tree-shakeable):

<script setup lang="ts">
import { SpringButton, toast, ToastStack } from 'vuelix'
</script>

<template>
  <SpringButton @click="toast.success('Saved!')">Save</SpringButton>
  <ToastStack />
</template>

Or register everything globally:

import { Vuelix } from 'vuelix'

app.use(Vuelix)                   // <SpringButton />
app.use(Vuelix, { prefix: 'Vx' }) // <VxSpringButton />

Copy source (CLI)

Components are also distributed through a shadcn-vue compatible registry, so you get the source in your project.

1. Set up your project

You need a Vue 3 (Vite) or Nuxt project with Tailwind CSS v4. If you don't have shadcn-vue set up yet, run:

npx shadcn-vue@latest init

This creates components.json, adds the cn() helper at lib/utils.ts, and writes the theme CSS variables.

2. Add a component

Point the CLI at any component's registry URL:

npx shadcn-vue@latest add https://vuelix.dev/r/spring-button.json

The CLI copies the source into components/ui/spring-button/ and installs its npm dependencies (motion-v, etc.).

Use the @vuelix namespace (optional)

Add the registry to components.json so you can install by name:

{
  "registries": {
    "@vuelix": "https://vuelix.dev/r/{name}.json"
  }
}

npx shadcn-vue@latest add @vuelix/spring-button @vuelix/dock

Manual installation

Every component page has a Manual installation section with the full source. Install the listed dependencies, copy the files, and make sure you have the cn helper:

utils

// lib/utils.ts
import type { ClassValue } from 'clsx'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

npm install motion-v clsx tailwind-merge

Nuxt

Components work as-is in Nuxt. motion-v also ships a Nuxt module (motion-v/nuxt) if you want auto-imports for motion, AnimatePresence, etc.:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})