Component Categories
Form Components
Input fields, selectors, and form controls for building interactive forms
Layout & Structure
Containers, grids, and structural components for page organization
Navigation
Menus, breadcrumbs, and navigation components for site structure
Data Display
Tables, cards, and components for presenting information
Feedback & Overlay
Modals, toasts, alerts, and notification components
Content & Media
Images, avatars, and rich content components
Dashboard
Pre-built dashboard layouts and admin interface components
Marketing & Landing
Hero sections, pricing tables, and marketing page components
Blog & Documentation
Blog posts, changelogs, and documentation-specific components
Chat & AI
Chat interfaces and AI-powered interaction components
Editor & Rich Text
Text editors with advanced formatting capabilities
Utilities
Helper components for color modes, themes, and more
Form Components
Build powerful, accessible forms with validation and rich input controls.Form
Form container with validation
FormField
Individual form field wrapper
Input
Text input field
InputDate
Date picker input
InputMenu
Input with dropdown menu
InputNumber
Numeric input with controls
InputTags
Tag/chip input field
InputTime
Time picker input
Textarea
Multi-line text input
Select
Native select dropdown
SelectMenu
Enhanced select with search
Checkbox
Single checkbox control
CheckboxGroup
Multiple checkbox group
RadioGroup
Radio button group
Switch
Toggle switch control
Slider
Range slider input
PinInput
PIN code input fields
FileUpload
File upload with drag & drop
ColorPicker
Color selection input
Calendar
Date calendar picker
FieldGroup
Group form fields together
AuthForm
Pre-built authentication form
Layout & Structure
Organize your application layout with flexible container components.App
Root application wrapper
Container
Centered content container
Main
Main content area
Page
Page layout wrapper
PageBody
Page main content section
PageAside
Page sidebar section
PageColumns
Multi-column page layout
PageGrid
Grid layout for pages
PageList
List layout for pages
Separator
Visual divider line
Collapsible
Expandable content section
ScrollArea
Custom scrollable area
Navigation
Help users navigate your application with intuitive navigation components.Header
Site header component
Footer
Site footer component
FooterColumns
Multi-column footer layout
NavigationMenu
Main navigation menu
Breadcrumb
Breadcrumb navigation
Tabs
Tab navigation component
Link
Enhanced link component
LinkBase
Base link component
Button
Interactive button element
Pagination
Page navigation controls
CommandPalette
Quick search/action palette
ContextMenu
Right-click context menu
ContextMenuContent
Context menu content wrapper
DropdownMenu
Dropdown menu component
DropdownMenuContent
Dropdown menu content
Stepper
Step-by-step navigation
Data Display
Present data and information in clear, organized formats.Table
Data table component
Card
Content card container
Accordion
Expandable content sections
Badge
Status and label badges
Chip
Small tag/chip element
Timeline
Event timeline display
Tree
Hierarchical tree view
Progress
Progress bar indicator
Skeleton
Loading placeholder
Kbd
Keyboard key display
User
User profile display
Empty
Empty state component
Carousel
Image/content carousel
Marquee
Scrolling content marquee
Feedback & Overlay
Provide user feedback with alerts, modals, and notification components.Alert
Alert message component
Banner
Announcement banner
Toast
Toast notification
Toaster
Toast notification container
Modal
Modal dialog component
Slideover
Slide-out panel
Drawer
Side drawer component
Popover
Popover overlay
Tooltip
Tooltip on hover
Error
Error state display
OverlayProvider
Overlay context provider
Content & Media
Display images, avatars, and rich media content.Avatar
User avatar image
AvatarGroup
Multiple avatars in a group
Icon
Icon display component
Dashboard
Build admin interfaces and dashboards with these specialized components.DashboardNavbar
Dashboard top navigation
DashboardSidebar
Dashboard side navigation
DashboardSidebarToggle
Sidebar toggle button
DashboardSidebarCollapse
Collapsible sidebar section
DashboardPanel
Dashboard content panel
DashboardGroup
Dashboard component group
DashboardToolbar
Dashboard toolbar
DashboardSearch
Dashboard search component
DashboardSearchButton
Dashboard search trigger
DashboardResizeHandle
Resizable panel handle
Marketing & Landing
Create stunning landing pages and marketing sites.PageHero
Hero section component
PageHeader
Page header section
PageSection
Page content section
PageFeature
Feature showcase section
PageCTA
Call-to-action section
PageCard
Marketing card component
PageLinks
Link collection display
PageLogos
Logo grid display
PricingPlans
Pricing plans display
PricingPlan
Single pricing plan card
PricingTable
Pricing comparison table
Blog & Documentation
Components for content sites, blogs, and documentation.BlogPosts
Blog post listing
BlogPost
Single blog post display
ChangelogVersions
Changelog version list
ChangelogVersion
Single changelog entry
PageAnchors
Table of contents anchors
ContentNavigation
Content navigation menu
ContentSearch
Content search interface
ContentSearchButton
Content search trigger
ContentToc
Table of contents
ContentSurround
Previous/next navigation
Chat & AI
Build conversational interfaces and AI-powered experiences.ChatMessages
Chat message container
ChatMessage
Single chat message
ChatPrompt
Chat input prompt
ChatPromptSubmit
Chat submit button
ChatPalette
Chat command palette
Editor & Rich Text
Create rich text editing experiences with these editor components.Editor
Rich text editor
EditorToolbar
Editor formatting toolbar
EditorDragHandle
Drag handle for blocks
EditorEmojiMenu
Emoji picker menu
EditorMentionMenu
@ mention autocomplete
EditorSuggestionMenu
Command suggestion menu
Utilities
Helper components for theming, localization, and color mode management.Theme
Theme provider
ColorModeAvatar
Avatar with color mode
ColorModeButton
Color mode toggle button
ColorModeImage
Image with color mode variants
ColorModeSelect
Color mode selector
ColorModeSwitch
Color mode switch toggle
LocaleSelect
Language/locale selector
Prose Components
MDX/Markdown rendering components for rich content.Prose components are automatically used when rendering Markdown content. They provide styled HTML elements optimized for documentation and content pages.
View all Prose Components
View all Prose Components
ProseA
Anchor/link element
ProseAccordion
Prose accordion wrapper
ProseAccordionItem
Accordion item
ProseBadge
Badge in content
ProseBlockquote
Blockquote element
ProseCallout
Callout box
ProseCard
Card in content
ProseCardGroup
Group of cards
ProseCode
Inline code
ProseCodeCollapse
Collapsible code block
ProseCodeGroup
Tabbed code blocks
ProseCodeIcon
Code language icon
ProseCodePreview
Code with live preview
ProseCodeTree
File tree display
ProseCollapsible
Collapsible content
ProseEm
Italic/emphasis
ProseField
API field documentation
ProseFieldGroup
Group of fields
ProseH1
Heading level 1
ProseH2
Heading level 2
ProseH3
Heading level 3
ProseH4
Heading level 4
ProseHr
Horizontal rule
ProseIcon
Icon in content
ProseImg
Image element
ProseKbd
Keyboard key
ProseLi
List item
ProseOl
Ordered list
ProseP
Paragraph
ProsePre
Code block
ProseScript
Script embed
ProseSteps
Step-by-step guide
ProseStrong
Bold text
ProseTable
Table element
ProseTabs
Tab container
ProseTabsItem
Tab item
ProseTbody
Table body
ProseTd
Table cell
ProseTh
Table header
ProseThead
Table head
ProseTr
Table row
ProseUl
Unordered list
ProseCaution
Caution callout
ProseNote
Note callout
ProseTip
Tip callout
ProseWarning
Warning callout
Getting Started
Ready to start building? Check out the Installation Guide to add Nuxt UI to your project.Installation
Install Nuxt UI in your project
Theming
Customize component styles
Examples
Browse component examples
GitHub
View source code