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.

Button component

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

Card components

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

List components

The list component is a display interface for items

Chip component

Chips are useful for displaying small pieces of information

Divider components

Dividers are used to separate content into distinct sections or groups

Expansion panel components

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

Menu component

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

Dialog component

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

Overlay component

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

Toolbar components

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

Tooltip component

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

Sheet component

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.

Autocomplete component

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

Combobox components

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

Text field

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

Checkbox components

The checkbox component is a replacement for the native input checkbox

Switch components

The switch component is an alternately styled checkbox

Radio button

The radio component is a replacement for its native counterpart

File input

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

Form component

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

Inputs component

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

Select component

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

Slider component

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 slider

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

Textarea component

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.

Carousel component

Carousels are used to display multiple forms of visual content

Button group

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

Chip group

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

Window components

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 table component

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

Server side component

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

Virtual Data component

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

Table component

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

Virtual scroll component

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.

Alert component

Alerts convey important information to the user

Badge component

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

Banner component

Banners are used to communicate important information to the user

Snackbar component

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

Rating component

Ratings are useful for collecting user feedback

Timeline components

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

Hover component

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

Progress circular component

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

Progress linear component

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 component

The aspect ratio component enforces a defined ratio

Avatar component

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

Icon component

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

Image component

The image component provides a flexible interface for displaying images

Parallax component

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 picker component

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

Providers

Defaults provider component

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

Locale provider component

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

Theme provider component

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 component

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

No ssr component

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