Installation

How to install Inspira UI in your app.

This guide will help you install and set up Inspira UI components in your Vue or Nuxt application.

Note: Inspira UI is built upon shadcn-vue and requires it to be set up beforehand.

Follow this guide to install and configure shadcn-vue in your project.

Getting Started with Inspira UI

Set up shadcn-vue

To begin, install and configure shadcn-vue in your project by following this guide.

This setup will also initialize the tailwindcss.config.ts and cn utility.

Add depedencies

Install inspira-ui/plugins as devDependencies for tailwind.

npm

pnpm

bun

yarn

npm install -D @inspira-ui/plugins

Install VueUse and supporting libraries.

npm

pnpm

bun

yarn

npm install @vueuse/core @vueuse/motion

Update `tailwind.config.ts`

Add the following code to your tailwind.config.ts file:

tailwind.config.ts

import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";
import { setupInspiraUI } from "@inspira-ui/plugins";

export default {
    /** rest of the code */
  plugins: [
    animate, 
    setupInspiraUI
  ],
} satisfies Config;

Great job! Your project is now configured to use Inspira UI.

Start Using Inspira UI 🚀

Now, you can start using Inspira UI components in your project. Choose the components you need, copy the code, and integrate them into your application.