You are currently viewing the documentation for Vuetify 3
Go to Vuetify 2

Components

Vuetify Components are interactive building blocks for creating user interfaces.

Containment

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

buttons

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

cards

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

lists

The list component is a display interface for items

chips

Chips are useful for displaying small pieces of information

dividers

Dividers are used to separate content into distinct sections or groups

expansion panels

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

menus

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

dialogs

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

overlays

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

toolbars

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

tooltips

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

sheets

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

Form inputs and controls

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

autocompletes

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

combobox

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

text fields

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

checkboxes

The checkbox component is a replacement for the native input checkbox

switches

The switch component is an alternately styled checkbox

radio buttons

The radio component is a replacement for its native counterpart

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

forms

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

inputs

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

selects

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

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

range sliders

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

textareas

The textarea component is a replacement for the native textarea element

Layouts

Layout components are used to create responsive layouts.

grids

The grid component is used to create responsive layouts

Selection

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

carousels

Carousels are used to display multiple forms of visual content

button groups

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

chip groups

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

windows

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

Data and display

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

data tables

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

server side data tables

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

virtual data tables

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

tables

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

virtual scrollers

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

Feedback

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

alerts

Alerts convey important information to the user

badges

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

banners

Banners are used to communicate important information to the user

snackbars

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

ratings

Ratings are useful for collecting user feedback

timelines

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

hover

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

progress circular

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

progress linear

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

Images and icons

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

aspect ratios

The aspect ratio component enforces a defined ratio

avatars

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

icons

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

images

The image component provides a flexible interface for displaying images

parallax

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

Pickers

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

color pickers

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

Providers

defaults providers

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

locale providers

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

theme providers

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

Miscellaneous

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

lazy

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

no ssr

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub