Vue Components

Build beautiful, accessible, and responsive user interfaces with 110+ Vue components powered by Akar.

Layout

Core structural components for organizing your application's layout and establishing a consistent foundation for your UI.

App

Wraps your app to provide global configurations and more.

Container

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

Error

A pre-built error component with NuxtError support.

Footer

A responsive footer component.

Header

A responsive header component.

Main

A main element that fills the available viewport height.

Element

Essential UI building blocks including buttons, badges, avatars, icons, and other foundational interface elements for crafting intuitive and consistent user experiences.

Alert

A callout to draw user's attention.

Avatar

An image element with a fallback for representing the user.

AvatarGroup

Stack multiple avatars in a group.

Badge

A short text to represent a status or a category.

Banner

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

Button

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

Calendar

Displays dates and days of the week, facilitating date-related interactions.

Card

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

Chip

An indicator of a numeric value or a state.

Collapsible

An interactive component which expands/collapses a panel.

FieldGroup

Group multiple button-like elements together.

Icon

A component to display any icon from Iconify or another component.

Kbd

A kbd element to display a keyboard key.

Progress

An indicator showing the progress of a task.

Separator

Separates content horizontally or vertically.

Skeleton

A placeholder to show while content is loading.

Form

Comprehensive form components for building interactive user input experiences, including text inputs, selects, checkboxes, radio groups, switches, sliders, and complete form validation.

Checkbox

An input element to toggle between checked and unchecked states.

CheckboxGroup

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

ColorPicker

A component to select a color.

FileUpload

An input element to upload files.

Form

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

FormField

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

Input

An input element to enter text.

InputDate

Enables users to input specific dates within a designated field.

InputMenu

An autocomplete input with real-time suggestions.

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.

InputTime

Enables users to input specific times within a designated field.

PinInput

A sequence of one-character alphanumeric inputs.

RadioGroup

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

Select

A select element to choose from a list of options.

SelectMenu

An advanced searchable select element.

Slider

An input to select a numeric value within a range.

Switch

A control that toggles between two states.

Textarea

A textarea element to input multi-line text.

Data

Components for displaying and organizing data, including tables, accordions, carousels, timelines, trees, and user profiles.

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Carousel

A carousel with motion and swipe built using Embla.

Empty

A component to display an empty state.

Marquee

A component to create infinite scrolling content.

Table

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

Timeline

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

Tree

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

User

Display user information with name, description and avatar.

Navigation

Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, tabs, steppers, links, and command palettes.

Breadcrumb

A hierarchy of links to navigate through a website.

CommandPalette

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

FooterColumns

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

Link

A wrapper around <NuxtLink> with extra props.

NavigationMenu

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

Pagination

A list of buttons or links to navigate through pages.

Stepper

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

Tabs

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

Overlay

Floating UI elements that appear above the main content, including modals, popovers, tooltips, drawers, slideovers, and context menus.

ContextMenu

Displays a menu located at the pointer, triggered by a right-click or a long-press.

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Drawer

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

DropdownMenu

A menu to display actions when clicking on an element.

Popover

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

Slideover

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

Toast

A succinct message to provide information or feedback to the user.

Tooltip

A popup that reveals information when hovering over an element.

Page

Pre-built marketing and content sections for creating landing pages, blogs, pricing pages, and other marketing materials.

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

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

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardPanel

A resizable panel to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.

DashboardSearch

A ready to use CommandPalette to add to your dashboard.

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.

DashboardSidebar

A resizable and collapsible sidebar to display in a dashboard.

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.

Check out the Dashboard template on GitHub for a real-life example.

Chat

Components for building conversational interfaces and chatbots, powered by the Vercel AI SDK.

Check out the AI Chat template on GitHub for a real-life example.

Content

Components that integrate with Content for documentation sites, including table of contents, search, navigation trees, and surrounding page links.

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearch

A ready to use CommandPalette to add to your documentation.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

ContentSurround

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

ContentToc

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

Check out the Docs template on GitHub for a real-life example.

Color Mode

Components that integrate with Color Mode for theme switching between light, dark, and system preferences.

ColorModeAvatar

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

ColorModeButton

A Button to switch between light and dark mode.

ColorModeImage

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

ColorModeSelect

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

ColorModeSwitch

A switch to toggle between light and dark mode.

i18n

Components that integrate with i18n for internationalization and locale management.

LocaleSelect

A Select to switch between locales.