Skip to main content
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, check out Inspira UI v1 here.

​
Getting Started with Inspira UI

1

Set up Tailwind CSS

To begin, install tailwindcss using the appropriate guide for your framework:
2

Add dependencies

Install the following supporting libraries:
npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
Follow this guide to set up motion-v on Vue or Nuxt.
3

Update your main.css file

Skip this step if you are using shadcn-vue.
Add the following code to your main.css file to set up the CSS variables required for the components:
@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);
}
4

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.
5

Start Using Inspira UI

Great job! Your project is now configured to use 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.Visit the Inspira UI Documentation to browse available components and see usage examples.

​
Next Steps

Browse Components

Explore the full collection of available components and find the perfect ones for your project.

Contribute

Learn how to contribute your own components and help grow the Inspira UI library.

Build docs developers (and LLMs) love

Get started for freeTalk to us