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 dependencies
Install libraries for tailwindcss and utilities.
npm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate
Install VueUse and other supporting libraries.
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:
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
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.