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.

Getting Started with Inspira UI

Note: If you're using shadcn-vue, you can skip step 1 & 4.

Set up `tailwindcss`

To begin, install tailwindcss using this guide.

Add depedencies

Install libraries for tailwindcss and utilities.

npm

pnpm

bun

yarn

npm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate

Install VueUse and supporting libraries.

npm

pnpm

bun

yarn

npm install @vueuse/core @vueuse/motion

Follow this guide to setup @vueuse/motion on Vue and Nuxt

Update `tailwind.config.ts` and `tailwind.css`

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

tailwind.config.ts

tailwind.css

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

export default {
  darkMode: "selector",
  safelist: ["dark"],
  prefix: "",
  content: [],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },

  plugins: [animate, setupInspiraUI],
} satisfies Config;

Setup `cn` utility

Add following utility to lib/utils.ts

utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

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

export type ObjectValues<T> = T[keyof T];

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.