Getting Started

Introduction

AirUI is a flexible design system and UI library for Nuxt applications, offering a scalable foundation of fully styled components, theming tools, and developer-friendly utilities.

What is Air UI?

Air UI is a component and utility framework built on Vue, Nuxt, and Tailwind CSS. It provides:

A themeable design system based on semantic tokens
Typed, reusable components and utilities
Auto-imported composables and helpers in Nuxt

Built on two packages

Air UI is split into two packages, so you can install only the part you need:

@imaginario27/air-ui-ds

Typed component library, design tokens, themes, and composables for Vue and Nuxt projects.

Visit npm package

@imaginario27/air-ui-utils

Standalone, type-safe utilities and composables. Built for Nuxt, usable in any JavaScript or TypeScript project.

Visit npm package

Core technologies

Vue + Composition API

Written with Vue 3’s Composition API and TypeScript, and auto-imported in Nuxt.

Nuxt integration

All components and composables are auto-imported, with no extra configuration.

Tailwind CSS

Built on Tailwind CSS v4. Components use utility classes, and themes are customized through CSS variables.

Key features

Design System

Design tokens for color, spacing, typography, and themes
Light and dark theme support with semantic variables
Built-in script to generate theme tokens and CSS variables

Component Library

Vue components with typed props, slots, and emits
Auto-imported in Nuxt

Utility-first architecture

Type-safe, reusable helper functions and composables
Common utilities for:
- Form validation and filters
- Date and string formatting
- Navigation and page helpers
- PDF generation
- User and password utilities
Auto-imported in Nuxt, so you only use what you need

Developer experience

TypeScript support with IntelliSense
Tested with Vitest and Vue Test Utils

TypeScript support

Both packages are written in TypeScript:

Props, slots, and events are typed
Composables return typed reactive values
Design tokens are exposed as typed CSS variables
IntelliSense works in Nuxt and Vue projects

Installation

Learn how to install AirUI in your Nuxt project.