---
meta:
  nav: All Components
  title: All Vuetify Components
  description: Browse all of the available Vuetify components or group by category.
  keywords: components, all components, all Vuetify components
---

# Components

Vuetify Components are interactive building blocks for creating user interfaces.

<PageFeatures />

<PromotedEntry />

## Containment

Containment components wrap other components and provide additional functionality. They are typically used to provide a consistent layout or styling.

<v-row>

<ComponentsListItem name="Button component" src="buttons">

  The button component allows users to take actions or make choices with a single tap

</ComponentsListItem>

<ComponentsListItem name="Card components" src="cards">

  The card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions

</ComponentsListItem>

<ComponentsListItem name="List components" src="lists">

  The list component is a display interface for items

</ComponentsListItem>

<ComponentsListItem name="Chip component" src="chips">

  Chips are useful for displaying small pieces of information

</ComponentsListItem>

<ComponentsListItem name="Divider components" src="dividers">

  Dividers are used to separate content into distinct sections or groups

</ComponentsListItem>

<ComponentsListItem name="Expansion panel components"  src="expansion-panels">

  Expansion panels are used to reveal additional content in a compact manner

</ComponentsListItem>

<ComponentsListItem name="Menu component" src="menus">

  The menu component is used to display a list of actions that the user can make

</ComponentsListItem>

<ComponentsListItem name="Dialog component" src="dialogs">

  The dialog component informs a user about a specific task and may contain critical information

</ComponentsListItem>

<ComponentsListItem name="Bottom sheet component" src="bottom-sheets">

  The bottom sheet component elevates content from the bottom of the screen

</ComponentsListItem>

<ComponentsListItem name="Overlay component" src="overlays">

  The overlay component is used to display a custom scrim that sits on top of the application

</ComponentsListItem>

<ComponentsListItem name="Toolbar components" src="toolbars">

  Toolbars are used to label a content area and / or display a list of actions that the user can make

</ComponentsListItem>

<ComponentsListItem name="Tooltip component" src="tooltips">

  Tooltips provide additional information about an element when the user hovers over it

</ComponentsListItem>

<ComponentsListItem name="Sheet component" src="sheets">

  The sheet component is a simple piece of paper that can be used to style and customize a block of content

</ComponentsListItem>

</v-row>

----

## Navigation

Navigation components are used to navigate between different views or pages.

<v-row>

<ComponentsListItem name="App bars"  src="app-bars">

  The app bar is used for top level navigation items and current page actions

</ComponentsListItem>

<ComponentsListItem name="FABs" src="floating-action-buttons">

  The floating action button is used for a promoted actions within an application

</ComponentsListItem>

<ComponentsListItem name="Navigation drawers"  src="navigation-drawers">

  Navigation drawers contain primary application navigation links

</ComponentsListItem>

<ComponentsListItem name="Pagination component" src="paginations">

  The Pagination component is used to separate long sets of data

</ComponentsListItem>

<ComponentsListItem name="Bottom navigation"  src="bottom-navigation">

  The bottom navigation component is used for displaying navigation links on mobile

</ComponentsListItem>

<ComponentsListItem name="Breadcrumbs components" src="breadcrumbs">

  Breadcrumbs are navigational helpers for router pages

</ComponentsListItem>

<ComponentsListItem name="Footer component" src="footers">

  The footer component is a simple navigation area with inner site links

</ComponentsListItem>

<ComponentsListItem name="Speed dials" src="speed-dials">

  The speed dial component is a floating action button that can reveal additional actions when clicked

</ComponentsListItem>

<ComponentsListItem name="System bar"  src="system-bars">

  The system bar component shows application information with iconography, time, and more

</ComponentsListItem>

<ComponentsListItem name="Tabs components" src="tabs">

  Tabs are used to organize content into different sections that can be viewed independently

</ComponentsListItem>

</v-row>

----

## Form inputs and controls

Form components are used to collect user input in a variety of ways.

<v-row>

<ComponentsListItem name="Autocomplete component" src="autocompletes">

  Autocompletes are used to provide suggestions to the user as they type into a field

</ComponentsListItem>

<ComponentsListItem name="Combobox components" src="combobox">

  The combobox component is used to select a value from a list of options with the ability to enter a custom value

</ComponentsListItem>

<ComponentsListItem name="Text field"  src="text-fields">

  The text field component accepts textual input from users and is a replacement for the native text input element

</ComponentsListItem>

<ComponentsListItem name="Checkbox components" src="checkboxes">

  The checkbox component is a replacement for the native input checkbox

</ComponentsListItem>

<ComponentsListItem name="Switch components" src="switches">

  The switch component is an alternately styled checkbox

</ComponentsListItem>

<ComponentsListItem name="Radio button"  src="radio-buttons">

  The radio component is a replacement for its native counterpart

</ComponentsListItem>

<ComponentsListItem name="File input"  src="file-inputs">

  The file input component is used to select files from the user's device and is a replacement for the native file input element

</ComponentsListItem>

<ComponentsListItem name="Form component" src="forms">

  The form component is used to wrap form elements and provide a consistent styling and a single source for validation

</ComponentsListItem>

<ComponentsListItem name="Inputs component" src="inputs">

  Create custom inputs that can be used with the v-model directive

</ComponentsListItem>

<ComponentsListItem name="Number input component" src="number-inputs" labs>

  The number input component is used for collecting numerical data from the user

</ComponentsListItem>

<ComponentsListItem name="OTP Input component" src="otp-input" >

  The OTP input component is used for MFA authentication via input field

</ComponentsListItem>

<ComponentsListItem name="Select component" src="selects">

  The select component is used to select a value from a list of options and is a replacement for the native select element

</ComponentsListItem>

<ComponentsListItem name="Slider component" src="sliders">

  Sliders are used to select a value from a range of values by moving a slider thumb and are a replacement for the native input range element

</ComponentsListItem>

<ComponentsListItem name="Range slider"  src="range-sliders">

  Range sliders are regular sliders with the ability to select in a range

</ComponentsListItem>

<ComponentsListItem name="Textarea component" src="textareas">

  The textarea component is a replacement for the native textarea element

</ComponentsListItem>

</v-row>

----

## Layouts

Layout components are used to create responsive layouts.

<v-row>

<ComponentsListItem name="grids" src="grids">

  The grid component is used to create responsive layouts

</ComponentsListItem>

</v-row>

----

## Selection

These components allow a user to select one or multiple items from a list of options.

<v-row>

<ComponentsListItem name="Carousel component" src="carousels">

  Carousels are used to display multiple forms of visual content

</ComponentsListItem>

<ComponentsListItem name="Button group" src="button-groups">

  Button groups are used to select between multiple options using the button component

</ComponentsListItem>

<ComponentsListItem name="Chip group" src="chip-groups">

  Chip group is a wrapper component that makes chips interactive and allows them to be selected

</ComponentsListItem>

<ComponentsListItem name="Window components" src="windows">

  The window component is used to display a block of content based upon a model

</ComponentsListItem>

<ComponentsListItem name="Stepper components" src="steppers">

  The stepper component is a linear progress control used to break lengthy forms into smaller logical sections

</ComponentsListItem>

</v-row>

----

## Data and display

These components are used to display data and information in a variety of ways.

<v-row>

<ComponentsListItem name="Confirm edit component" src="confirm-edit">

  The confirm edit component is used to confirm changes to data

</ComponentsListItem>

<ComponentsListItem name="Data iterator component" src="data-iterators">

  The data iterator component provides an easy interface for paginating and sorting data

</ComponentsListItem>

<ComponentsListItem name="Data table component"  src="data-tables/basics">

  Data tables are used to display large amounts of data in a small amount of space

</ComponentsListItem>

<ComponentsListItem name="Infinite scroll component"  src="infinite-scroller">

  The Infinite scroll component is a container that loads more items when scrolling

</ComponentsListItem>

<ComponentsListItem name="Server-side table component"  src="data-tables/server-side-tables">

  Server side data tables are intended to be used with a server side data source

</ComponentsListItem>

<ComponentsListItem name="Sparkline component" src="sparklines">

  The sparkline component creates beautiful and expressive simple graphs for displaying numerical data

</ComponentsListItem>

<ComponentsListItem name="Virtual Data table component"  src="data-tables/virtual-tables">

  The virtual data table component is used to display very large subsets of data

</ComponentsListItem>

<ComponentsListItem name="Table component" src="tables">

  The table component is a barebones table for manually displaying data and is a replacement for the native table element

</ComponentsListItem>

<ComponentsListItem name="Virtual scroll component"  src="virtual-scroller">

  The virtual scroller component makes it possible to render large amounts of data without sacrificing performance

</ComponentsListItem>

</v-row>

----

## Feedback

These components are used to provide feedback to the user within content, over content, or in response to user actions.

<v-row>

<ComponentsListItem name="Alert component" src="alerts">

  Alerts convey important information to the user

</ComponentsListItem>

<ComponentsListItem name="Badge component" src="badges">

  Badges superscript or subscript an avatar-like icon or text onto content.

</ComponentsListItem>

<ComponentsListItem name="Banner component" src="banners">

  Banners are used to communicate important information to the user

</ComponentsListItem>

<ComponentsListItem name="Empty state component" src="empty-states">

  The empty state component is used to indicate that a page or area on a page has no content.

</ComponentsListItem>

<ComponentsListItem name="Skeleton loader component" src="skeleton-loaders">

  Displays a content, enhancing perceived performance during data-fetching & rendering

</ComponentsListItem>

<ComponentsListItem name="Snackbar component" src="snackbars">

  The snackbar component is used to display a message to the user that hovers over existing content

</ComponentsListItem>

<ComponentsListItem name="Rating component" src="ratings">

  Ratings are useful for collecting user feedback

</ComponentsListItem>

<ComponentsListItem name="Timeline components" src="timelines">

  Timeline components are used to display a list of events in chronological order

</ComponentsListItem>

<ComponentsListItem name="Hover component" src="hover">

  The hover component is a wrapper component that allows you to react to hover events

</ComponentsListItem>

<ComponentsListItem name="Progress circular component"  src="progress-circular">

  Circular progress's are a visual indicator of numerical data in a circle

</ComponentsListItem>

<ComponentsListItem name="Progress linear component"  src="progress-linear">

  The linear progress component is used to display numerical data in a horizontal line

</ComponentsListItem>

</v-row>

----

## Images and icons

This subset of components are used to display media in a variety of ways.

<v-row>

<ComponentsListItem name="Aspect ratios component"  src="aspect-ratios">

  The aspect ratio component enforces a defined ratio

</ComponentsListItem>

<ComponentsListItem name="Avatar component" src="avatars">

  Avatars are used in numerous components to display avatars and profile pictures

</ComponentsListItem>

<ComponentsListItem name="Icon component" src="icons">

  The icon component is an reusable component that can be used to display icons

</ComponentsListItem>

<ComponentsListItem name="Image component" src="images">

  The image component provides a flexible interface for displaying images

</ComponentsListItem>

<ComponentsListItem name="Parallax component" src="parallax">

  Creates a 3d effect that makes an image appear to move slower than the foreground

</ComponentsListItem>

</v-row>

----

## Pickers

These components are used to select a value from a specifically styled set of options.

<v-row>

<ComponentsListItem name="Color picker component"  src="color-pickers">

  The color picker component is used to select a color from a palette

</ComponentsListItem>

<ComponentsListItem name="Date picker component" src="date-pickers">

  The date picker component is used to select a single date from a calendar month / year.

</ComponentsListItem>

</v-row>

----

## Providers

<v-row>

<ComponentsListItem name="Defaults provider component"  src="defaults-providers">

  The defaults provider component is used to set default values for all components within a template

</ComponentsListItem>

<ComponentsListItem name="Locale provider component"  src="locale-providers">

  The locale provider component allows you to change the language of all components within its slot

</ComponentsListItem>

<ComponentsListItem name="Theme provider component"  src="theme-providers">

  The theme provider component allows you to change the theme of all children components

</ComponentsListItem>

</v-row>

----

## Miscellaneous

These components don't fit into a traditional category and are used for a variety of purposes.

<v-row>

<ComponentsListItem name="Lazy component" src="lazy">

  The lazy component is a wrapper component that prevents the rendering of its child components until it is visible in the viewport

</ComponentsListItem>

<ComponentsListItem name="No-ssr component"  src="no-ssr">

  This component is used to prevent the rendering of its child components on the server

</ComponentsListItem>

</v-row>

::: info
  This page is under **design** construction and will be updated with the missing images over time.
:::
