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`

Currently Inspira UI supports TailwindCSS v3. Make sure you install TailwindCSS v3.

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 other supporting libraries.

npm

pnpm

bun

yarn

npm install @vueuse/core motion-v

Follow this guide to setup motion-v on Vue and Nuxt

Update `tailwind.config.js` and `tailwind.css`

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

tailwind.config.js

tailwind.css

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

export default {
  darkMode: "selector",
  safelist: ["dark"],
  prefix: "",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  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],
};

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.

Optional: Add Icon Support

A variety of Inspira UI components and demos utilize the <Icon> component with Iconify icons. Although optional, we recommend installing it for an optimal experience.

To add icon support to your Vue.js or Nuxt.js project, please follow the Iconify Vue guide.

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.