Installation
How to install dependencies and structure your app.
1. Create project
Start by creating a new Vue project using Vite.
npm create vite@latest my-app -- --template vue-ts2. Run the CLI
Initialize Shadcn Vue to set up Tailwind and CSS variables.
npx shadcn-vue@latest init3. Add Raya Components
You can now add any component from our registry.
npx shadcn-vue@latest add https://raya-ui.com/registry/tree.json1. Create project
Initialize a new Nuxt application.
npx nuxi@latest init my-app2. Run the CLI
Run the Shadcn init command to configure `components.json` and Tailwind.
npx shadcn-vue@latest init3. Add Raya Components
npx shadcn-vue@latest add https://raya-ui.com/registry/tree.json1. Create project
Create a new Astro project.
npm create astro@latest2. Run the CLI
Initialize Shadcn Vue.
npx shadcn-vue@latest init3. Add Raya Components
npx shadcn-vue@latest add https://raya-ui.com/registry/tree.json1. Create project
Start a new Laravel project.
composer create-project laravel/laravel my-app2. Run the CLI
Configure Shadcn Vue for Laravel.
npx shadcn-vue@latest init3. Add Raya Components
npx shadcn-vue@latest add https://raya-ui.com/registry/tree.jsonWe strongly recommend using the CLI tools above. Manual installation requires setting up Tailwind variables yourself.
1. Install Dependencies
Install the required utility libraries and primitives.
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-vue-next reka-ui @vueuse/core2. Configure Utils
Create a `lib/utils.ts` file for the class merger.
lib/utils.ts
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}