Nuxt UI

Nuxt UI

A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.

A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.

Available Resources

Installation (Nuxt & Vue)

• Installation: Learn how to install and configure Nuxt UI in your Nuxt application.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/installation/nuxt.md

• Installation: Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/installation/vue.md

Getting Started

• Introduction: Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

  • URL: https://ui.nuxt.com/raw/docs/getting-started.md

• Installation: Learn how to install and configure Nuxt UI in your Nuxt application.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/installation/nuxt.md

• Installation: Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/installation/vue.md

• Migration to v4: A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/migration/v4.md

• Migration to v3: A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/migration/v3.md

• Contribution: A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/contribution.md

• Design System: Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md

• CSS Variables: Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/theme/css-variables.md

• Customize components: Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/theme/components.md

• Icons: Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md

• Icons: Nuxt UI integrates with Iconify to access over 200,000+ icons.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/vue.md

• Fonts: Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/fonts.md

• Color Mode: Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/nuxt.md

• Color Mode: Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/vue.md

• Internationalization (i18n): Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/nuxt.md

• Internationalization (i18n): Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/vue.md

• Content: Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/content.md

• SSR: Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/ssr.md

• MCP Server: Use Nuxt UI components in your AI assistants with Model Context Protocol support.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/ai/mcp.md

• LLMs.txt: How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/ai/llms-txt.md

• Skills: Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.

  • URL: https://ui.nuxt.com/raw/docs/getting-started/ai/skills.md

Components

• Accordion: A stacked set of collapsible panels.

  • URL: https://ui.nuxt.com/raw/docs/components/accordion.md

• Alert: A callout to draw user's attention.

  • URL: https://ui.nuxt.com/raw/docs/components/alert.md

• App: Wraps your app to provide global configurations and more.

  • URL: https://ui.nuxt.com/raw/docs/components/app.md

• AuthForm: A customizable Form to create login, register or password reset forms.

  • URL: https://ui.nuxt.com/raw/docs/components/auth-form.md

• Avatar: An img element with fallback and Nuxt Image support.

  • URL: https://ui.nuxt.com/raw/docs/components/avatar.md

• AvatarGroup: Stack multiple avatars in a group.

  • URL: https://ui.nuxt.com/raw/docs/components/avatar-group.md

• Badge: A short text to represent a status or a category.

  • URL: https://ui.nuxt.com/raw/docs/components/badge.md

• Banner: Display a banner at the top of your website to inform users about important information.

  • URL: https://ui.nuxt.com/raw/docs/components/banner.md

• BlogPost: A customizable article to display in a blog page.

  • URL: https://ui.nuxt.com/raw/docs/components/blog-post.md

• BlogPosts: Display a list of blog posts in a responsive grid layout.

  • URL: https://ui.nuxt.com/raw/docs/components/blog-posts.md

• Breadcrumb: A hierarchy of links to navigate through a website.

  • URL: https://ui.nuxt.com/raw/docs/components/breadcrumb.md

• Button: A button element that can act as a link or trigger an action.

  • URL: https://ui.nuxt.com/raw/docs/components/button.md

• Calendar: A calendar component for selecting single dates, multiple dates or date ranges.

  • URL: https://ui.nuxt.com/raw/docs/components/calendar.md

• Card: Display content in a card with a header, body and footer.

  • URL: https://ui.nuxt.com/raw/docs/components/card.md

• Carousel: A carousel with motion and swipe built using Embla.

  • URL: https://ui.nuxt.com/raw/docs/components/carousel.md

• ChangelogVersion: A customizable article to display in a changelog.

  • URL: https://ui.nuxt.com/raw/docs/components/changelog-version.md

• ChangelogVersions: Display a list of changelog versions in a timeline.

  • URL: https://ui.nuxt.com/raw/docs/components/changelog-versions.md

• ChatMessage: Display a chat message with icon, avatar, and actions.

  • URL: https://ui.nuxt.com/raw/docs/components/chat-message.md

• ChatMessages: Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.

  • URL: https://ui.nuxt.com/raw/docs/components/chat-messages.md

• ChatPalette: A chat palette to create a chatbot interface inside an overlay.

  • URL: https://ui.nuxt.com/raw/docs/components/chat-palette.md

• ChatPrompt: An enhanced Textarea for submitting prompts in AI chat interfaces.

  • URL: https://ui.nuxt.com/raw/docs/components/chat-prompt.md

• ChatPromptSubmit: A Button for submitting chat prompts with automatic status handling.

  • URL: https://ui.nuxt.com/raw/docs/components/chat-prompt-submit.md

• Checkbox: An input element to toggle between checked and unchecked states.

  • URL: https://ui.nuxt.com/raw/docs/components/checkbox.md

• CheckboxGroup: A set of checklist buttons to select multiple option from a list.

  • URL: https://ui.nuxt.com/raw/docs/components/checkbox-group.md

• Chip: An indicator of a numeric value or a state.

  • URL: https://ui.nuxt.com/raw/docs/components/chip.md

• Collapsible: A collapsible element to toggle visibility of its content.

  • URL: https://ui.nuxt.com/raw/docs/components/collapsible.md

• ColorModeAvatar: An Avatar with a different source for light and dark mode.

  • URL: https://ui.nuxt.com/raw/docs/components/color-mode-avatar.md

• ColorModeButton: A Button to switch between light and dark mode.

  • URL: https://ui.nuxt.com/raw/docs/components/color-mode-button.md

• ColorModeImage: An image element with a different source for light and dark mode.

  • URL: https://ui.nuxt.com/raw/docs/components/color-mode-image.md

• ColorModeSelect: A Select to switch between system, dark & light mode.

  • URL: https://ui.nuxt.com/raw/docs/components/color-mode-select.md

• ColorModeSwitch: A switch to toggle between light and dark mode.

  • URL: https://ui.nuxt.com/raw/docs/components/color-mode-switch.md

• ColorPicker: A component to select a color.

  • URL: https://ui.nuxt.com/raw/docs/components/color-picker.md

• CommandPalette: A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.

  • URL: https://ui.nuxt.com/raw/docs/components/command-palette.md

• Container: A container lets you center and constrain the width of your content.

  • URL: https://ui.nuxt.com/raw/docs/components/container.md

• ContentNavigation: An accordion-style navigation component for organizing page links.

  • URL: https://ui.nuxt.com/raw/docs/components/content-navigation.md

• ContentSearch: A ready to use CommandPalette to add to your documentation.

  • URL: https://ui.nuxt.com/raw/docs/components/content-search.md

• ContentSearchButton: A pre-styled Button to open the ContentSearch modal.

  • URL: https://ui.nuxt.com/raw/docs/components/content-search-button.md

• ContentSurround: A pair of prev and next links to navigate between pages.

  • URL: https://ui.nuxt.com/raw/docs/components/content-surround.md

• ContentToc: A sticky Table of Contents with automatic active anchor link highlighting.

  • URL: https://ui.nuxt.com/raw/docs/components/content-toc.md

• ContextMenu: A menu to display actions when right-clicking on an element.

  • URL: https://ui.nuxt.com/raw/docs/components/context-menu.md

• DashboardGroup: A fixed layout component that provides context for dashboard components with sidebar state management and persistence.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-group.md

• DashboardNavbar: A responsive navbar to display in a dashboard.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-navbar.md

• DashboardPanel: A resizable panel to display in a dashboard.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-panel.md

• DashboardResizeHandle: A handle to resize a sidebar or panel.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-resize-handle.md

• DashboardSearch: A ready to use CommandPalette to add to your dashboard.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-search.md

• DashboardSearchButton: A pre-styled Button to open the DashboardSearch modal.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-search-button.md

• DashboardSidebar: A resizable and collapsible sidebar to display in a dashboard.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar.md

• DashboardSidebarCollapse: A Button to collapse the sidebar on desktop.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-collapse.md

• DashboardSidebarToggle: A Button to toggle the sidebar on mobile.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-toggle.md

• DashboardToolbar: A toolbar to display under the navbar in a dashboard.

  • URL: https://ui.nuxt.com/raw/docs/components/dashboard-toolbar.md

• Drawer: A drawer that smoothly slides in & out of the screen.

  • URL: https://ui.nuxt.com/raw/docs/components/drawer.md

• DropdownMenu: A menu to display actions when clicking on an element.

  • URL: https://ui.nuxt.com/raw/docs/components/dropdown-menu.md

• Editor: A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.

  • URL: https://ui.nuxt.com/raw/docs/components/editor.md

• EditorDragHandle: A draggable handle for reordering and selecting blocks in the editor.

  • URL: https://ui.nuxt.com/raw/docs/components/editor-drag-handle.md

• EditorEmojiMenu: An emoji picker menu that displays emoji suggestions when typing the : character in the editor.

  • URL: https://ui.nuxt.com/raw/docs/components/editor-emoji-menu.md

• EditorMentionMenu: A mention menu that displays user suggestions when typing the @ character in the editor.

  • URL: https://ui.nuxt.com/raw/docs/components/editor-mention-menu.md

• EditorSuggestionMenu: A command menu that displays formatting and action suggestions when typing the / character in the editor.

  • URL: https://ui.nuxt.com/raw/docs/components/editor-suggestion-menu.md

• EditorToolbar: A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.

  • URL: https://ui.nuxt.com/raw/docs/components/editor-toolbar.md

• Empty: A component to display an empty state.

  • URL: https://ui.nuxt.com/raw/docs/components/empty.md

• Error: A pre-built error component with NuxtError support.

  • URL: https://ui.nuxt.com/raw/docs/components/error.md

• FieldGroup: Group multiple button-like elements together.

  • URL: https://ui.nuxt.com/raw/docs/components/field-group.md

• FileUpload: An input element to upload files.

  • URL: https://ui.nuxt.com/raw/docs/components/file-upload.md

• Footer: A responsive footer component.

  • URL: https://ui.nuxt.com/raw/docs/components/footer.md

• FooterColumns: A list of links as columns to display in your Footer.

  • URL: https://ui.nuxt.com/raw/docs/components/footer-columns.md

• Form: A form component with built-in validation and submission handling.

  • URL: https://ui.nuxt.com/raw/docs/components/form.md

• FormField: A wrapper for form elements that provides validation and error handling.

  • URL: https://ui.nuxt.com/raw/docs/components/form-field.md

• Header: A responsive header component.

  • URL: https://ui.nuxt.com/raw/docs/components/header.md

• Icon: A component to display any icon from Iconify or another component.

  • URL: https://ui.nuxt.com/raw/docs/components/icon.md

• Input: An input element to enter text.

  • URL: https://ui.nuxt.com/raw/docs/components/input.md

• InputDate: An input component for date selection.

  • URL: https://ui.nuxt.com/raw/docs/components/input-date.md

• InputMenu: An autocomplete input with real-time suggestions.

  • URL: https://ui.nuxt.com/raw/docs/components/input-menu.md

• InputNumber: An input for numerical values with a customizable range.

  • URL: https://ui.nuxt.com/raw/docs/components/input-number.md

• InputTags: An input element that displays interactive tags.

  • URL: https://ui.nuxt.com/raw/docs/components/input-tags.md

• InputTime: An input for selecting a time.

  • URL: https://ui.nuxt.com/raw/docs/components/input-time.md

• Kbd: A kbd element to display a keyboard key.

  • URL: https://ui.nuxt.com/raw/docs/components/kbd.md

• Link: A wrapper around with extra props.

  • URL: https://ui.nuxt.com/raw/docs/components/link.md

• LocaleSelect: A Select to switch between locales.

  • URL: https://ui.nuxt.com/raw/docs/components/locale-select.md

• Main: A main element that fills the available viewport height.

  • URL: https://ui.nuxt.com/raw/docs/components/main.md

• Marquee: A component to create infinite scrolling content.

  • URL: https://ui.nuxt.com/raw/docs/components/marquee.md

• Modal: A dialog window that can be used to display a message or request user input.

  • URL: https://ui.nuxt.com/raw/docs/components/modal.md

• NavigationMenu: A list of links that can be displayed horizontally or vertically.

  • URL: https://ui.nuxt.com/raw/docs/components/navigation-menu.md

• Page: A grid layout for your pages with left and right columns.

  • URL: https://ui.nuxt.com/raw/docs/components/page.md

• PageAnchors: A list of anchors to be displayed in the page.

  • URL: https://ui.nuxt.com/raw/docs/components/page-anchors.md

• PageAside: A sticky aside to display your page navigation.

  • URL: https://ui.nuxt.com/raw/docs/components/page-aside.md

• PageBody: The main content of your page.

  • URL: https://ui.nuxt.com/raw/docs/components/page-body.md

• PageCard: A pre-styled card component that displays a title, description and optional link.

  • URL: https://ui.nuxt.com/raw/docs/components/page-card.md

• PageColumns: A responsive multi-column layout system for organizing content side-by-side.

  • URL: https://ui.nuxt.com/raw/docs/components/page-columns.md

• PageCTA: A call to action section to display in your pages.

  • URL: https://ui.nuxt.com/raw/docs/components/page-cta.md

• PageFeature: A component to showcase key features of your application.

  • URL: https://ui.nuxt.com/raw/docs/components/page-feature.md

• PageGrid: A responsive grid system for displaying content in a flexible layout.

  • URL: https://ui.nuxt.com/raw/docs/components/page-grid.md

• PageHeader: A responsive header for your pages.

  • URL: https://ui.nuxt.com/raw/docs/components/page-header.md

• PageHero: A responsive hero for your pages.

  • URL: https://ui.nuxt.com/raw/docs/components/page-hero.md

• PageLinks: A list of links to be displayed in the page.

  • URL: https://ui.nuxt.com/raw/docs/components/page-links.md

• PageList: A vertical list layout for displaying content in a stacked format.

  • URL: https://ui.nuxt.com/raw/docs/components/page-list.md

• PageLogos: A list of logos or images to display on your pages.

  • URL: https://ui.nuxt.com/raw/docs/components/page-logos.md

• PageSection: A responsive section for your pages.

  • URL: https://ui.nuxt.com/raw/docs/components/page-section.md

• Pagination: A list of buttons or links to navigate through pages.

  • URL: https://ui.nuxt.com/raw/docs/components/pagination.md

• PinInput: An input element to enter a pin.

  • URL: https://ui.nuxt.com/raw/docs/components/pin-input.md

• Popover: A non-modal dialog that floats around a trigger element.

  • URL: https://ui.nuxt.com/raw/docs/components/popover.md

• PricingPlan: A customizable pricing plan to display in a pricing page.

  • URL: https://ui.nuxt.com/raw/docs/components/pricing-plan.md

• PricingPlans: Display a list of pricing plans in a responsive grid layout.

  • URL: https://ui.nuxt.com/raw/docs/components/pricing-plans.md

• PricingTable: A responsive pricing table component that displays tiered pricing plans with feature comparisons.

  • URL: https://ui.nuxt.com/raw/docs/components/pricing-table.md

• Progress: An indicator showing the progress of a task.

  • URL: https://ui.nuxt.com/raw/docs/components/progress.md

• RadioGroup: A set of radio buttons to select a single option from a list.

  • URL: https://ui.nuxt.com/raw/docs/components/radio-group.md

• ScrollArea: A flexible scroll container with virtualization support.

  • URL: https://ui.nuxt.com/raw/docs/components/scroll-area.md

• Select: A select element to choose from a list of options.

  • URL: https://ui.nuxt.com/raw/docs/components/select.md

• SelectMenu: An advanced searchable select element.

  • URL: https://ui.nuxt.com/raw/docs/components/select-menu.md

• Separator: Separates content horizontally or vertically.

  • URL: https://ui.nuxt.com/raw/docs/components/separator.md

• Skeleton: A placeholder to show while content is loading.

  • URL: https://ui.nuxt.com/raw/docs/components/skeleton.md

• Slideover: A dialog that slides in from any side of the screen.

  • URL: https://ui.nuxt.com/raw/docs/components/slideover.md

• Slider: An input to select a numeric value within a range.

  • URL: https://ui.nuxt.com/raw/docs/components/slider.md

• Stepper: A set of steps that are used to indicate progress through a multi-step process.

  • URL: https://ui.nuxt.com/raw/docs/components/stepper.md

• Switch: A control that toggles between two states.

  • URL: https://ui.nuxt.com/raw/docs/components/switch.md

• Table: A responsive table element to display data in rows and columns.

  • URL: https://ui.nuxt.com/raw/docs/components/table.md

• Tabs: A set of tab panels that are displayed one at a time.

  • URL: https://ui.nuxt.com/raw/docs/components/tabs.md

• Textarea: A textarea element to input multi-line text.

  • URL: https://ui.nuxt.com/raw/docs/components/textarea.md

• Timeline: A component that displays a sequence of events with dates, titles, icons or avatars.

  • URL: https://ui.nuxt.com/raw/docs/components/timeline.md

• Toast: A succinct message to provide information or feedback to the user.

  • URL: https://ui.nuxt.com/raw/docs/components/toast.md

• Tooltip: A popup that reveals information when hovering over an element.

  • URL: https://ui.nuxt.com/raw/docs/components/tooltip.md

• Tree: A tree view component to display and interact with hierarchical data structures.

  • URL: https://ui.nuxt.com/raw/docs/components/tree.md

• User: Display user information with name, description and avatar.

  • URL: https://ui.nuxt.com/raw/docs/components/user.md

Composables

• defineLocale: A utility to create a custom locale for your app.

  • URL: https://ui.nuxt.com/raw/docs/composables/define-locale.md

• defineShortcuts: A composable to define keyboard shortcuts in your app.

  • URL: https://ui.nuxt.com/raw/docs/composables/define-shortcuts.md

• extendLocale: A utility to extend an existing locale with custom translations.

  • URL: https://ui.nuxt.com/raw/docs/composables/extend-locale.md

• extractShortcuts: A utility to extract keyboard shortcuts from menu items.

  • URL: https://ui.nuxt.com/raw/docs/composables/extract-shortcuts.md

• useFormField: A composable to integrate custom inputs with the Form component

  • URL: https://ui.nuxt.com/raw/docs/composables/use-form-field.md

• useOverlay: A composable to programmatically control overlays.

  • URL: https://ui.nuxt.com/raw/docs/composables/use-overlay.md

• useToast: A composable to display toast notifications in your app.

  • URL: https://ui.nuxt.com/raw/docs/composables/use-toast.md

Documentation Sets

• Nuxt UI Full Documentation: This is the full documentation for Nuxt UI. It includes all the Markdown files written with the MDC syntax.
  • URL: https://ui.nuxt.com/llms-full.txt

Notes

How to Use This Skill

Reference these resources when working with Nuxt UI.