repository·v4·Indexed 27 days ago
https://github.com/nuxt/uiA UI component library for Nuxt and Vue applications powered by Vue, Tailwind CSS, Reka UI, and Tailwind Variants. It provides accessible, performant, and customizable components, including a CLI for scaffolding components and locales, and a dedicated <UApp> wrapper for managing modals, toasts, and overlays.
Nuxt UI is a comprehensive Vue UI component library that provides over 125 accessible, production-ready components built with Tailwind CSS, Tailwind Variants, and Reka UI.
While optimized for the Nuxt ecosystem, it is compatible with any Vue project (Vite, Inertia, SSR) by using the provided Vite plugin. It is designed with a focus on developer experience (TypeScript support, auto-completion), accessibility (WAI-ARIA compliant), and modern design.
The UContentNavigation component provides an accordion-style navigation interface for organizing page links.
Requirement: This component is only available when the @nuxt/content module is installed.
Editor component is a rich text editor based on TipTap. It supports multiple content types including Markdown, HTML, and JSON. Use it to provide users with a rich text editing experience within your Nuxt applications.Nuxt UI provides styled typography for standard Markdown elements. Supported elements include:
H1 through H4.**text**.*text*.[text](url).> text.---.Nuxt UI provides a suite of components for building AI-powered chat interfaces, designed to work with the Vercel AI SDK.
Available Components:
ChatMessages: Scrollable message list with auto-scroll and loading indicators.ChatMessage: Individual message bubble with avatar, actions, and slots.ChatPrompt: Enhanced textarea for user input.ChatPromptSubmit: Submit button with automatic status handling.ChatReasoning: Collapsible block for displaying AI reasoning or thinking processes.ChatTool: Collapsible block for displaying AI tool invocation status.ChatShimmer: Text shimmer animation for streaming states.ChatPalette: Layout wrapper for embedding chat in modals or drawers.SelectMenu component is an advanced, searchable select element used for form inputs. It allows users to select from a list of items, often with search capabilities.Nuxt UI provides several components specifically designed for building documentation sites with @nuxt/content:
ContentSearch: A built-in full-text search command palette (replaces the need for Algolia DocSearch).ContentNavigation: A navigation tree component.ContentToc: A sticky Table of Contents component.ContentSurround: Provides 'previous' and 'next' navigation links.Nuxt UI provides over 125+ Vue components powered by Tailwind CSS and Reka UI. Components are organized into the following functional categories:
To implement image uploading, you must register a custom TipTap node via the extensions prop and define how the upload is triggered using the handlers prop.
FileUpload component.Editor via the extensions prop.To manage toast behavior globally, configure the toaster prop on the UApp component. This controls the default position, duration, maximum number of visible toasts, and stacking behavior.
<script setup lang="ts">
const toaster = {
position: 'bottom-right', // 'horizontal' | 'vertical' (via orientation)
duration: 5000, // milliseconds
max: 3, // max toasts displayed
expand: true // set to true for stacked toasts
}
</script>
<template>
<UApp :toaster="toaster">
<NuxtPage />
</UApp>
</template>Images in Nuxt UI are responsive and support interactive zoom by default. Clicking an image opens it in a modal overlay.
If you have @nuxt/image installed, the system will automatically use the <NuxtImg> component instead of the native img tag for better performance and optimization.
To disable the zoom functionality for a specific image, use the :zoom="false" attribute.