Vuetify Components are interactive building blocks for creating user interfaces.
Containment components wrap other components and provide additional functionality. They are typically used to provide a consistent layout or styling.
The card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions
Expansion panel components
Expansion panels are used to reveal additional content in a compact manner
The dialog component informs a user about a specific task and may contain critical information
The overlay component is used to display a custom scrim that sits on top of the application
Toolbars are used to label a content area and / or display a list of actions that the user can make
Tooltips provide additional information about an element when the user hovers over it
Bottom Sheet component
The bottom sheet component is a modified dialog that slides from the bottom of the screen
Form inputs and controls
Form components are used to collect user input in a variety of ways.
Autocompletes are used to provide suggestions to the user as they type into a field
The combobox component is used to select a value from a list of options with the ability to enter a custom value
The text field component accepts textual input from users and is a replacement for the native text input element
The file input component is used to select files from the user’s device and is a replacement for the native file input element
The form component is used to wrap form elements and provide a consistent styling and a single source for validation
OTP Input component
The OTP input component is used for MFA authentication via input field
The select component is used to select a value from a list of options and is a replacement for the native select element
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
Layout components are used to create responsive layouts.
These components allow a user to select one or multiple items from a list of options.
Chip group is a wrapper component that makes chips interactive and allows them to be selected
The stepper component is a linear progress control used to break lengthy forms into smaller logical sections
Data and display
These components are used to display data and information in a variety of ways.
Data iterator component
The data iterator component provides an easy interface for paginating and sorting data
Data table component
Data tables are used to display large amounts of data in a small amount of space
Infinite scroll component
The Infinite scroll component is a container that loads more items when scrolling
Server side table component
Server side data tables are intended to be used with a server side data source
Virtual Data table component
The virtual data table component is used to display very large subsets of data
The table component is a barebones table for manually displaying data and is a replacement for the native table element
These components are used to provide feedback to the user within content, over content, or in response to user actions.
Skeleton loader component
Displays a content, enhancing perceived performance during data-fetching & rendering
The snackbar component is used to display a message to the user that hovers over existing content
Images and icons
This subset of components are used to display media in a variety of ways.
These components are used to select a value from a specifically styled set of options.
Date picker component
The date picker component is used to select a single date from a calendar month / year.
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
These components don’t fit into a traditional category and are used for a variety of purposes.
The lazy component is a wrapper component that prevents the rendering of its child components until it is visible in the viewport
This page is under design construction and will be updated with the missing images over time.