--- title: "Components" description: "Build beautiful, accessible, and responsive user interfaces with 125+ Vue components powered by Tailwind CSS and Reka UI." canonical_url: "https://ui.nuxt.com/docs/components" --- # Components > Build beautiful, accessible, and responsive user interfaces with 125+ Vue components powered by Tailwind CSS and Reka UI. ## Layout Core structural components for organizing your application's layout and establishing a consistent foundation for your UI. - [App](https://ui.nuxt.com/raw/docs/components/app.md) - [Container](https://ui.nuxt.com/raw/docs/components/container.md) - [Error](https://ui.nuxt.com/raw/docs/components/error.md) - [Footer](https://ui.nuxt.com/raw/docs/components/footer.md) - [Header](https://ui.nuxt.com/raw/docs/components/header.md) - [Main](https://ui.nuxt.com/raw/docs/components/main.md) - [Sidebar](https://ui.nuxt.com/raw/docs/components/sidebar.md) - [Theme](https://ui.nuxt.com/raw/docs/components/theme.md) ## Element Essential UI building blocks including buttons, badges, avatars, icons, and other foundational interface elements for crafting intuitive and consistent user experiences. - [Alert](https://ui.nuxt.com/raw/docs/components/alert.md) - [Avatar](https://ui.nuxt.com/raw/docs/components/avatar.md) - [AvatarGroup](https://ui.nuxt.com/raw/docs/components/avatar-group.md) - [Badge](https://ui.nuxt.com/raw/docs/components/badge.md) - [Banner](https://ui.nuxt.com/raw/docs/components/banner.md) - [Button](https://ui.nuxt.com/raw/docs/components/button.md) - [Calendar](https://ui.nuxt.com/raw/docs/components/calendar.md) - [Card](https://ui.nuxt.com/raw/docs/components/card.md) - [Chip](https://ui.nuxt.com/raw/docs/components/chip.md) - [Collapsible](https://ui.nuxt.com/raw/docs/components/collapsible.md) - [FieldGroup](https://ui.nuxt.com/raw/docs/components/field-group.md) - [Icon](https://ui.nuxt.com/raw/docs/components/icon.md) - [Kbd](https://ui.nuxt.com/raw/docs/components/kbd.md) - [Progress](https://ui.nuxt.com/raw/docs/components/progress.md) - [Separator](https://ui.nuxt.com/raw/docs/components/separator.md) - [Skeleton](https://ui.nuxt.com/raw/docs/components/skeleton.md) ## Form Comprehensive form components for building interactive user input experiences, including text inputs, selects, checkboxes, radio groups, switches, sliders, and complete form validation. - [Checkbox](https://ui.nuxt.com/raw/docs/components/checkbox.md) - [CheckboxGroup](https://ui.nuxt.com/raw/docs/components/checkbox-group.md) - [ColorPicker](https://ui.nuxt.com/raw/docs/components/color-picker.md) - [FileUpload](https://ui.nuxt.com/raw/docs/components/file-upload.md) - [Form](https://ui.nuxt.com/raw/docs/components/form.md) - [FormField](https://ui.nuxt.com/raw/docs/components/form-field.md) - [Input](https://ui.nuxt.com/raw/docs/components/input.md) - [InputDate](https://ui.nuxt.com/raw/docs/components/input-date.md) - [InputMenu](https://ui.nuxt.com/raw/docs/components/input-menu.md) - [InputNumber](https://ui.nuxt.com/raw/docs/components/input-number.md) - [InputTags](https://ui.nuxt.com/raw/docs/components/input-tags.md) - [InputTime](https://ui.nuxt.com/raw/docs/components/input-time.md) - [PinInput](https://ui.nuxt.com/raw/docs/components/pin-input.md) - [RadioGroup](https://ui.nuxt.com/raw/docs/components/radio-group.md) - [Select](https://ui.nuxt.com/raw/docs/components/select.md) - [SelectMenu](https://ui.nuxt.com/raw/docs/components/select-menu.md) - [Slider](https://ui.nuxt.com/raw/docs/components/slider.md) - [Switch](https://ui.nuxt.com/raw/docs/components/switch.md) - [Textarea](https://ui.nuxt.com/raw/docs/components/textarea.md) ## Data Components for displaying and organizing data, including tables, accordions, carousels, timelines, trees, and user profiles. - [Accordion](https://ui.nuxt.com/raw/docs/components/accordion.md) - [Carousel](https://ui.nuxt.com/raw/docs/components/carousel.md) - [Empty](https://ui.nuxt.com/raw/docs/components/empty.md) - [Marquee](https://ui.nuxt.com/raw/docs/components/marquee.md) - [ScrollArea](https://ui.nuxt.com/raw/docs/components/scroll-area.md) - [Table](https://ui.nuxt.com/raw/docs/components/table.md) - [Timeline](https://ui.nuxt.com/raw/docs/components/timeline.md) - [Tree](https://ui.nuxt.com/raw/docs/components/tree.md) - [User](https://ui.nuxt.com/raw/docs/components/user.md) ## Navigation Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, tabs, steppers, links, and command palettes. - [Breadcrumb](https://ui.nuxt.com/raw/docs/components/breadcrumb.md) - [CommandPalette](https://ui.nuxt.com/raw/docs/components/command-palette.md) - [FooterColumns](https://ui.nuxt.com/raw/docs/components/footer-columns.md) - [Link](https://ui.nuxt.com/raw/docs/components/link.md) - [NavigationMenu](https://ui.nuxt.com/raw/docs/components/navigation-menu.md) - [Pagination](https://ui.nuxt.com/raw/docs/components/pagination.md) - [Stepper](https://ui.nuxt.com/raw/docs/components/stepper.md) - [Tabs](https://ui.nuxt.com/raw/docs/components/tabs.md) ## Overlay Floating UI elements that appear above the main content, including modals, popovers, tooltips, drawers, slideovers, and context menus. - [ContextMenu](https://ui.nuxt.com/raw/docs/components/context-menu.md) - [Drawer](https://ui.nuxt.com/raw/docs/components/drawer.md) - [DropdownMenu](https://ui.nuxt.com/raw/docs/components/dropdown-menu.md) - [Modal](https://ui.nuxt.com/raw/docs/components/modal.md) - [Popover](https://ui.nuxt.com/raw/docs/components/popover.md) - [Slideover](https://ui.nuxt.com/raw/docs/components/slideover.md) - [Toast](https://ui.nuxt.com/raw/docs/components/toast.md) - [Tooltip](https://ui.nuxt.com/raw/docs/components/tooltip.md) ## Page Pre-built marketing and content sections for creating landing pages, blogs, pricing pages, and other marketing materials. - [AuthForm](https://ui.nuxt.com/raw/docs/components/auth-form.md) - [BlogPost](https://ui.nuxt.com/raw/docs/components/blog-post.md) - [BlogPosts](https://ui.nuxt.com/raw/docs/components/blog-posts.md) - [ChangelogVersion](https://ui.nuxt.com/raw/docs/components/changelog-version.md) - [ChangelogVersions](https://ui.nuxt.com/raw/docs/components/changelog-versions.md) - [Page](https://ui.nuxt.com/raw/docs/components/page.md) - [PageAnchors](https://ui.nuxt.com/raw/docs/components/page-anchors.md) - [PageAside](https://ui.nuxt.com/raw/docs/components/page-aside.md) - [PageBody](https://ui.nuxt.com/raw/docs/components/page-body.md) - [PageCard](https://ui.nuxt.com/raw/docs/components/page-card.md) - [PageColumns](https://ui.nuxt.com/raw/docs/components/page-columns.md) - [PageCTA](https://ui.nuxt.com/raw/docs/components/page-cta.md) - [PageFeature](https://ui.nuxt.com/raw/docs/components/page-feature.md) - [PageGrid](https://ui.nuxt.com/raw/docs/components/page-grid.md) - [PageHeader](https://ui.nuxt.com/raw/docs/components/page-header.md) - [PageHero](https://ui.nuxt.com/raw/docs/components/page-hero.md) - [PageLinks](https://ui.nuxt.com/raw/docs/components/page-links.md) - [PageList](https://ui.nuxt.com/raw/docs/components/page-list.md) - [PageLogos](https://ui.nuxt.com/raw/docs/components/page-logos.md) - [PageSection](https://ui.nuxt.com/raw/docs/components/page-section.md) - [PricingPlan](https://ui.nuxt.com/raw/docs/components/pricing-plan.md) - [PricingPlans](https://ui.nuxt.com/raw/docs/components/pricing-plans.md) - [PricingTable](https://ui.nuxt.com/raw/docs/components/pricing-table.md) > [!NOTE] > See: https://github.com/nuxt-ui-templates/saas > > Check out the **SaaS template** on GitHub for a real-life example. ## Dashboard Specialized components for building dynamic dashboards with resizable panels, collapsible sidebars, toolbars, and search functionality. - [DashboardGroup](https://ui.nuxt.com/raw/docs/components/dashboard-group.md) - [DashboardNavbar](https://ui.nuxt.com/raw/docs/components/dashboard-navbar.md) - [DashboardPanel](https://ui.nuxt.com/raw/docs/components/dashboard-panel.md) - [DashboardResizeHandle](https://ui.nuxt.com/raw/docs/components/dashboard-resize-handle.md) - [DashboardSearch](https://ui.nuxt.com/raw/docs/components/dashboard-search.md) - [DashboardSearchButton](https://ui.nuxt.com/raw/docs/components/dashboard-search-button.md) - [DashboardSidebar](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar.md) - [DashboardSidebarCollapse](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-collapse.md) - [DashboardSidebarToggle](https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-toggle.md) - [DashboardToolbar](https://ui.nuxt.com/raw/docs/components/dashboard-toolbar.md) > [!NOTE] > > Check out the [`Nuxt`](https://github.com/nuxt-ui-templates/dashboard) and [`Vue`](https://github.com/nuxt-ui-templates/dashboard-vue) Dashboard templates on GitHub for a real-life example. ## AI Chat Components for building conversational interfaces and chatbots, powered by the [Vercel AI SDK](https://ai-sdk.dev/). - [ChatMessage](https://ui.nuxt.com/raw/docs/components/chat-message.md) - [ChatMessages](https://ui.nuxt.com/raw/docs/components/chat-messages.md) - [ChatPalette](https://ui.nuxt.com/raw/docs/components/chat-palette.md) - [ChatPrompt](https://ui.nuxt.com/raw/docs/components/chat-prompt.md) - [ChatPromptSubmit](https://ui.nuxt.com/raw/docs/components/chat-prompt-submit.md) - [ChatReasoning](https://ui.nuxt.com/raw/docs/components/chat-reasoning.md) - [ChatShimmer](https://ui.nuxt.com/raw/docs/components/chat-shimmer.md) - [ChatTool](https://ui.nuxt.com/raw/docs/components/chat-tool.md) > [!NOTE] > > Check out the [`Nuxt`](https://github.com/nuxt-ui-templates/chat) and [`Vue`](https://github.com/nuxt-ui-templates/chat-vue) AI Chat templates on GitHub for a real-life example. ## Editor `4.3+` Components for building a rich text editor with support for markdown, HTML, and JSON content types, powered by [TipTap](https://tiptap.dev/). - [Editor](https://ui.nuxt.com/raw/docs/components/editor.md) - [EditorDragHandle](https://ui.nuxt.com/raw/docs/components/editor-drag-handle.md) - [EditorEmojiMenu](https://ui.nuxt.com/raw/docs/components/editor-emoji-menu.md) - [EditorMentionMenu](https://ui.nuxt.com/raw/docs/components/editor-mention-menu.md) - [EditorSuggestionMenu](https://ui.nuxt.com/raw/docs/components/editor-suggestion-menu.md) - [EditorToolbar](https://ui.nuxt.com/raw/docs/components/editor-toolbar.md) > [!NOTE] > See: https://github.com/nuxt-ui-templates/editor > > Check out the **Editor template** on GitHub for a real-life example. ## Content Components that integrate with [Content](/docs/getting-started/integrations/content) for documentation sites, including table of contents, search, navigation trees, and surrounding page links. - [ContentNavigation](https://ui.nuxt.com/raw/docs/components/content-navigation.md) - [ContentSearch](https://ui.nuxt.com/raw/docs/components/content-search.md) - [ContentSearchButton](https://ui.nuxt.com/raw/docs/components/content-search-button.md) - [ContentSurround](https://ui.nuxt.com/raw/docs/components/content-surround.md) - [ContentToc](https://ui.nuxt.com/raw/docs/components/content-toc.md) > [!NOTE] > See: https://github.com/nuxt-ui-templates/docs > > Check out the **Docs template** on GitHub for a real-life example. ## Color Mode Components that integrate with [Color Mode](/docs/getting-started/integrations/color-mode) for theme switching between light, dark, and system preferences. - [ColorModeAvatar](https://ui.nuxt.com/raw/docs/components/color-mode-avatar.md) - [ColorModeButton](https://ui.nuxt.com/raw/docs/components/color-mode-button.md) - [ColorModeImage](https://ui.nuxt.com/raw/docs/components/color-mode-image.md) - [ColorModeSelect](https://ui.nuxt.com/raw/docs/components/color-mode-select.md) - [ColorModeSwitch](https://ui.nuxt.com/raw/docs/components/color-mode-switch.md) ## i18n Components that integrate with [i18n](/docs/getting-started/integrations/i18n) for internationalization and locale management. - [LocaleSelect](https://ui.nuxt.com/raw/docs/components/locale-select.md) ## Sitemap See the full [sitemap](/sitemap.md) for all pages.