This guide will help you install and set up Inspira UI components in your Vue or Nuxt application.
For Tailwind CSS v3 users Note: If you're using shadcn-vue, you can skip the installation steps and install only following libraries.
npm install @vueuse/core motion-v
pnpm install @vueuse/core motion-v
bun add @vueuse/core motion-v
yarn add @vueuse/core motion-v
Follow this guide to setup motion-v on Vue or Nuxt .
To begin, install tailwindcss using this guide .
Install libraries for tailwindcss and utilities.
npm install -D clsx tailwind-merge class-variance-authority tw-animate-css
pnpm install -D clsx tailwind-merge class-variance-authority tw-animate-css
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
yarn add --dev clsx tailwind-merge class-variance-authority tw-animate-css
Install VueUse and other supporting libraries.
npm install @vueuse/core motion-v
pnpm install @vueuse/core motion-v
bun add @vueuse/core motion-v
yarn add @vueuse/core motion-v
Follow this guide to setup motion-v on Vue or Nuxt .
Add the following code to your main.css file, this setup the variable required for the components:
@import "tailwindcss" ;
@import "tw-animate-css" ;
@custom-variant dark (&:is(.dark *));
:root {
--card : oklch ( 1 0 0 );
--card-foreground : oklch ( 0.141 0.005 285.823 );
--popover : oklch ( 1 0 0 );
--popover-foreground : oklch ( 0.141 0.005 285.823 );
--primary : oklch ( 0.21 0.006 285.885 );
--primary-foreground : oklch ( 0.985 0 0 );
--secondary : oklch ( 0.967 0.001 286.375 );
--secondary-foreground : oklch ( 0.21 0.006 285.885 );
--muted : oklch ( 0.967 0.001 286.375 );
--muted-foreground : oklch ( 0.552 0.016 285.938 );
--accent : oklch ( 0.967 0.001 286.375 );
--accent-foreground : oklch ( 0.21 0.006 285.885 );
--destructive : oklch ( 0.577 0.245 27.325 );
--destructive-foreground : oklch ( 0.577 0.245 27.325 );
--border : oklch ( 0.92 0.004 286.32 );
--input : oklch ( 0.92 0.004 286.32 );
--ring : oklch ( 0.705 0.015 286.067 );
--radius : 0.625 rem ;
--background : oklch ( 1 0 0 );
--foreground : oklch ( 0.141 0.005 285.823 );
}
.dark {
--background : oklch ( 0.141 0.005 285.823 );
--foreground : oklch ( 0.985 0 0 );
--card : oklch ( 0.141 0.005 285.823 );
--card-foreground : oklch ( 0.985 0 0 );
--popover : oklch ( 0.141 0.005 285.823 );
--popover-foreground : oklch ( 0.985 0 0 );
--primary : oklch ( 0.985 0 0 );
--primary-foreground : oklch ( 0.21 0.006 285.885 );
--secondary : oklch ( 0.274 0.006 286.033 );
--secondary-foreground : oklch ( 0.985 0 0 );
--muted : oklch ( 0.274 0.006 286.033 );
--muted-foreground : oklch ( 0.705 0.015 286.067 );
--accent : oklch ( 0.274 0.006 286.033 );
--accent-foreground : oklch ( 0.985 0 0 );
--destructive : oklch ( 0.396 0.141 25.723 );
--destructive-foreground : oklch ( 0.637 0.237 25.331 );
--border : oklch ( 0.274 0.006 286.033 );
--input : oklch ( 0.274 0.006 286.033 );
--ring : oklch ( 0.442 0.017 285.786 );
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
@layer base {
* {
@ apply border-border outline-ring /50;
}
body {
@ apply bg-background text-foreground ;
}
}
html {
color-scheme : light dark ;
}
html .dark {
color-scheme : dark ;
}
html .light {
color-scheme : light ;
}
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.
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 .
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.
Read more at List of all components
