Getting Started
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.
If you are using Tailwind CSS v3, Checkout Inspira UI v1 here.
Getting Started with Inspira UI
Set up tailwindcss
To begin, install tailwindcss using this Vite install guide for Vue or using this framework-specific guide for Nuxt.
Add dependencies
Install following supporting libraries.
npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
pnpm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
bun add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
yarn add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
Follow this guide to setup motion-v on Vue or Nuxt.
Update your main.css file
Skip this step if you are using
shadcn-vue.Add the following code to your main.css file, this setup the variable required for the components:
main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--color-background: var(--ui-bg);
--color-foreground: var(--ui-text);
--color-card: var(--ui-bg-elevated);
--color-card-foreground: var(--ui-text);
--color-popover: var(--ui-bg-elevated);
--color-popover-foreground: var(--ui-text);
--color-muted: var(--ui-bg-muted);
--color-muted-foreground: var(--ui-text-muted);
--color-accent: var(--ui-bg-accented);
--color-accent-foreground: var(--ui-text);
--color-border: var(--ui-border);
--color-input: var(--ui-border);
--color-primary: var(--ui-primary);
--color-primary-foreground: var(--ui-text-inverted);
--color-secondary: var(--ui-secondary);
--color-secondary-foreground: var(--ui-text-inverted);
--color-destructive: var(--ui-error);
--color-destructive-foreground: var(--ui-text-inverted);
--color-ring: var(--ui-primary);
--radius: var(--ui-radius);
}
:root {
--background: var(--ui-bg);
--foreground: var(--ui-text);
--card: var(--ui-bg-elevated);
--card-foreground: var(--ui-text);
--popover: var(--ui-bg-elevated);
--popover-foreground: var(--ui-text);
--muted: var(--ui-bg-muted);
--muted-foreground: var(--ui-text-muted);
--accent: var(--ui-bg-accented);
--accent-foreground: var(--ui-text);
--border: var(--ui-border);
--input: var(--ui-border);
--primary: var(--ui-primary);
--primary-foreground: var(--ui-text-inverted);
--secondary: var(--ui-secondary);
--secondary-foreground: var(--ui-text-inverted);
--destructive: var(--ui-error);
--destructive-foreground: var(--ui-text-inverted);
--ring: var(--ui-primary);
}
main.css
@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.625rem;
--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;
}
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.