Library Overview:
Framework: Nuxt 4 / Vue 3
Styling: Tailwind CSS 4 with a CSS variable-based theming system.
Theming: Components are theme-aware. A global style can be set, and individual components can override it with the styleName prop. Available styles include: "liquid-glass", "material", "bootstrap", "windows".
Component API Reference Below is the detailed API for the component library. You must refer to this guide for props, slots, and usage examples.
Click to view Component API (A-Z)
Accordion A vertically stacked set of interactive headings that each reveal a section of content.
Props: v-model, items, type, defaultValue, trailingIcon, styleName, size.
Slots: title, content.
Example:
Alert A component to display important messages.
Props: title, level, dismissible, styleName, size.
Slots: default, icon.
Example: Your profile has been updated.
Auto Suggest An input field that provides suggestions as the user types.
Props: v-model, suggestions, styleName, size.
Example:
Avatar A component to display a user's image or a fallback.
Props: v-model, alt, fallback, size, shape, styleName.
Slots: fallback.
Example:
Avatar Group A component to display a stack of avatars.
Props: avatars, max, size, shape, styleName.
Example:
Badge A small component to highlight information.
Props: variant, size, styleName.
Slots: default.
Example: Active
Breadcrumb A navigational aid to help users keep track of their location.
Props: items, styleName.
Slots: separator.
Example:
Button A clickable element used to trigger an action.
Props: variant, size, href, disabled, loading, styleName.
Slots: default.
Example: <AuiButton @click="handleClick" :loading="isLoading">Submit
Button Group A component to group related buttons.
Props: attached, styleName.
Example: LMR
Calendar A component for selecting dates and date ranges.
Props: v-model, range, numberOfMonths, disabledDates, disableBefore, disableAfter, styleName.
Example:
Card A container for content with optional header and footer sections.
Props: styleName.
Slots: header, default, footer.
Example: <template #header>TitleBody<template #footer>Action
Carousel A slideshow component for cycling through elements.
Props: styleName.
Slots: default.
Example:
Checkbox A control that allows the user to select one or more options.
Props: v-model, value, label, disabled, styleName.
Example:
Chip A compact element that represents an input, attribute, or action.
Props: variant, size, dismissible, styleName.
Events: dismiss.
Example: <AuiChip variant="primary" dismissible @dismiss="onDismiss">Tag
Color Picker A component for selecting a color.
Props: v-model, styleName.
Example:
Context Menu A menu that appears on right-click.
Props: items, styleName.
Slots: default.
Example:
Dialog A window overlaid on the primary window.
Props: v-model, title, persistent, styleName.
Slots: header, default, footer.
Example:
Are you sure?
Drawer A panel that slides in from the edge of the screen.
Props: v-model:open, title, position, styleName.
Slots: header, default, footer.
Example:
Dropdown A menu that appears when a trigger is clicked.
Props: placement, styleName.
Slots: trigger, content (receives close function).
Example: <template #trigger>Options<template #content="{ close }"><a @click="close">Item 1
Form A renderless component for handling form state and validation with Zod.
Props: schema (required), formData (required, use v-model).
Events: submit.
Slots: default (provides errors, handleSubmit).
Example:
Code snippet
<script setup> import { z } from 'zod'; const schema = z.object({ name: z.string().min(1) }); const formData = ref({ name: '' }); </script>{{ errors.name }}
Submit Indicator A small dot to indicate a status or notification.Props: color, size, styleName.
Example:
Input A standard text input field.
Props: v-model, placeholder, type, disabled, styleName, size.
Example:
Kbd A component to display keyboard shortcuts.
Props: value, size, styleName.
Example: Ctrl + C
Leaflet An interactive map component using Leaflet.js.
Props: zoom, center, markers, styleName.
Example:
Navigation Menu A menu for site navigation.
Props: items, styleName.
Example:
Pagination A component to navigate between pages.
Props: v-model, total (required), itemsPerPage, styleName.
Example:
Pin Input A component for entering a sequence of characters, like a PIN.
Props: v-model, length, styleName.
Example:
Popover A floating panel that appears in relation to a trigger.
Props: placement, styleName.
Slots: trigger, content.
Example: <template #trigger>...<template #content>...
Progress A component to display the progress of a task.
Props: v-model, styleName, size.
Example:
Separator A horizontal or vertical line to separate content.
Props: orientation, styleName.
Example:
Skeleton A component to show a placeholder loading state.
Props: class (for shape), styleName.
Example:
Slider A component to select a value from a range.
Props: v-model, min, max, step, range, styleName.
Example:
Stepper A component to guide users through a sequence of steps.
Props: v-model, steps, styleName.
Example:
Switch A toggle switch component.
Props: v-model, label, disabled, styleName.
Example:
Tabs A component to organize content into different sections.
Props: v-model, items, styleName.
Slots: default.
Example:
Textarea A multi-line text input field.
Props: v-model, placeholder, disabled, rows, styleName.
Example:
Timeline A component to display a series of events in chronological order.
Props: items, styleName.
Example:
Toast A component to show brief, temporary notifications. Triggered via useNuxtApp().$toast.
Props: title, description, duration, styleName.
Example: const { $toast } = useNuxtApp(); $toast.show({ title: 'Success', description: 'Data saved.' });
Tooltip A small pop-up that displays information when a user hovers over an element.
Props: text (required), placement, styleName.
Slots: default.
Example: Hover
Tree A component to display hierarchical data.
Props: data, styleName.
Example: