Top Sites>Vuetify — A Vue Component Framework

User-agent: *
Allow: /

Sitemap: https://vuetifyjs.com/sitemap.xml

# Vuetify

> Material Design component framework for Vue.js. Production-ready with 80+ UI components, directives, and features for building modern web applications.

## Introduction

- [Why Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/): Core benefits and philosophy
- [Long-term Support](https://vuetifyjs.com/en/introduction/long-term-support/): LTS policy and version support
- [Roadmap](https://vuetifyjs.com/en/introduction/roadmap/): Upcoming features and releases
- [Enterprise Support](https://vuetifyjs.com/en/introduction/enterprise-support/): Professional support options

## Getting Started

- [Installation](https://vuetifyjs.com/en/getting-started/installation/): Setup with Vite, Nuxt, or CDN
- [Frequently Asked Questions](https://vuetifyjs.com/en/getting-started/frequently-asked-questions/): Common issues and solutions
- [Upgrade Guide](https://vuetifyjs.com/en/getting-started/upgrade-guide/): Migration between versions
- [Browser Support](https://vuetifyjs.com/en/getting-started/browser-support/): Supported browsers
- [Unit Testing](https://vuetifyjs.com/en/getting-started/unit-testing/): Testing Vuetify components

## Features

- [Accessibility](https://vuetifyjs.com/en/features/accessibility/): A11y support and ARIA
- [Application Layout](https://vuetifyjs.com/en/features/application-layout/): App scaffolding with v-app, v-main, v-app-bar
- [Theme](https://vuetifyjs.com/en/features/theme/): Light/dark themes, custom colors
- [SASS Variables](https://vuetifyjs.com/en/features/sass-variables/): Customizing component styles
- [Icon Fonts](https://vuetifyjs.com/en/features/icon-fonts/): MDI, Font Awesome, custom icons
- [Internationalization](https://vuetifyjs.com/en/features/internationalization/): i18n and RTL support
- [Global Configuration](https://vuetifyjs.com/en/features/global-configuration/): Default props and settings
- [Display and Platform](https://vuetifyjs.com/en/features/display-and-platform/): Breakpoints and device detection
- [Treeshaking](https://vuetifyjs.com/en/features/treeshaking/): Automatic component imports
- [Blueprints](https://vuetifyjs.com/en/features/blueprints/): Pre-configured component sets
- [Dates](https://vuetifyjs.com/en/features/dates/): Date adapter configuration
- [Aliasing](https://vuetifyjs.com/en/features/aliasing/): Component aliases
- [Scrolling](https://vuetifyjs.com/en/features/scrolling/): Programmatic scroll control
- [Hotkey](https://vuetifyjs.com/en/features/hotkey/): Keyboard shortcuts

## Styles

- [CSS Reset](https://vuetifyjs.com/en/styles/css-reset/): Normalize browser styles
- [Colors](https://vuetifyjs.com/en/styles/colors/): Material Design color palette
- [Transitions](https://vuetifyjs.com/en/styles/transitions/): Built-in animations
- [Spacing](https://vuetifyjs.com/en/styles/spacing/): Margin and padding utilities
- [Flex](https://vuetifyjs.com/en/styles/flex/): Flexbox utility classes
- [Display](https://vuetifyjs.com/en/styles/display/): Visibility utilities
- [Elevation](https://vuetifyjs.com/en/styles/elevation/): Box shadow utilities
- [Text and Typography](https://vuetifyjs.com/en/styles/text-and-typography/): Text utilities
- [Border Radius](https://vuetifyjs.com/en/styles/border-radius/): Rounded corners
- [Borders](https://vuetifyjs.com/en/styles/borders/): Border utilities

## Concepts

- [v-model](https://vuetifyjs.com/en/concepts/v-model/): Two-way binding patterns
- [Variants](https://vuetifyjs.com/en/concepts/variants/): Component style variants (outlined, plain, etc.)
- [Density and Sizing](https://vuetifyjs.com/en/concepts/density-and-sizing/): Compact, comfortable, default densities
- [Items](https://vuetifyjs.com/en/concepts/items/): Item prop patterns for lists/selects
- [Routing](https://vuetifyjs.com/en/concepts/routing/): Router integration

## Components - Containment

- [Buttons](https://vuetifyjs.com/en/components/buttons/): v-btn with variants, sizes, icons
- [Cards](https://vuetifyjs.com/en/components/cards/): v-card container with header, text, actions
- [Dialogs](https://vuetifyjs.com/en/components/dialogs/): v-dialog modal windows
- [Menus](https://vuetifyjs.com/en/components/menus/): v-menu dropdown menus
- [Chips](https://vuetifyjs.com/en/components/chips/): v-chip compact elements
- [Expansion Panels](https://vuetifyjs.com/en/components/expansion-panels/): v-expansion-panels accordion
- [Lists](https://vuetifyjs.com/en/components/lists/): v-list with items, groups, subitems
- [Sheets](https://vuetifyjs.com/en/components/sheets/): v-sheet surface container
- [Bottom Sheets](https://vuetifyjs.com/en/components/bottom-sheets/): v-bottom-sheet mobile panel
- [Overlays](https://vuetifyjs.com/en/components/overlays/): v-overlay backdrop
- [Toolbars](https://vuetifyjs.com/en/components/toolbars/): v-toolbar action bar
- [Tooltips](https://vuetifyjs.com/en/components/tooltips/): v-tooltip hover hints
- [Dividers](https://vuetifyjs.com/en/components/dividers/): v-divider separator

## Components - Navigation

- [App Bars](https://vuetifyjs.com/en/components/app-bars/): v-app-bar top navigation
- [Navigation Drawers](https://vuetifyjs.com/en/components/navigation-drawers/): v-navigation-drawer side menu
- [Tabs](https://vuetifyjs.com/en/components/tabs/): v-tabs content switching
- [Bottom Navigation](https://vuetifyjs.com/en/components/bottom-navigation/): v-bottom-navigation mobile nav
- [Breadcrumbs](https://vuetifyjs.com/en/components/breadcrumbs/): v-breadcrumbs path display
- [Footers](https://vuetifyjs.com/en/components/footers/): v-footer page footer
- [Paginations](https://vuetifyjs.com/en/components/paginations/): v-pagination page navigation
- [System Bars](https://vuetifyjs.com/en/components/system-bars/): v-system-bar status bar
- [Speed Dials](https://vuetifyjs.com/en/components/speed-dials/): v-speed-dial FAB menu
- [Floating Action Buttons](https://vuetifyjs.com/en/components/floating-action-buttons/): v-fab circular action button

## Components - Form Inputs

- [Text Fields](https://vuetifyjs.com/en/components/text-fields/): v-text-field input with validation
- [Selects](https://vuetifyjs.com/en/components/selects/): v-select dropdown selection
- [Autocompletes](https://vuetifyjs.com/en/components/autocompletes/): v-autocomplete searchable select
- [Combobox](https://vuetifyjs.com/en/components/combobox/): v-combobox with custom values
- [Checkboxes](https://vuetifyjs.com/en/components/checkboxes/): v-checkbox boolean input
- [Switches](https://vuetifyjs.com/en/components/switches/): v-switch toggle
- [Radio Buttons](https://vuetifyjs.com/en/components/radio-buttons/): v-radio-group single selection
- [Sliders](https://vuetifyjs.com/en/components/sliders/): v-slider numeric range
- [Range Sliders](https://vuetifyjs.com/en/components/range-sliders/): v-range-slider min/max selection
- [File Inputs](https://vuetifyjs.com/en/components/file-inputs/): v-file-input upload
- [Textareas](https://vuetifyjs.com/en/components/textareas/): v-textarea multiline input
- [Number Inputs](https://vuetifyjs.com/en/components/number-inputs/): v-number-input numeric input
- [OTP Input](https://vuetifyjs.com/en/components/otp-input/): v-otp-input verification codes
- [Forms](https://vuetifyjs.com/en/components/forms/): v-form validation wrapper
- [Inputs](https://vuetifyjs.com/en/components/inputs/): v-input base component

## Components - Data Display

- [Data Tables](https://vuetifyjs.com/en/components/data-tables/introduction/): v-data-table with sorting, filtering, pagination
- [Calendars](https://vuetifyjs.com/en/components/calendars/): v-calendar date display
- [Tables](https://vuetifyjs.com/en/components/tables/): v-table simple tables
- [Treeview](https://vuetifyjs.com/en/components/treeview/): v-treeview hierarchical data
- [Data Iterators](https://vuetifyjs.com/en/components/data-iterators/): v-data-iterator custom layouts
- [Virtual Scroller](https://vuetifyjs.com/en/components/virtual-scroller/): v-virtual-scroll large lists
- [Infinite Scroller](https://vuetifyjs.com/en/components/infinite-scroller/): v-infinite-scroll lazy loading
- [Sparklines](https://vuetifyjs.com/en/components/sparklines/): v-sparkline mini charts
- [Hotkeys](https://vuetifyjs.com/en/components/hotkeys/): v-hotkey keyboard display
- [Confirm Edit](https://vuetifyjs.com/en/components/confirm-edit/): v-confirm-edit inline editing

## Components - Selection

- [Button Groups](https://vuetifyjs.com/en/components/button-groups/): v-btn-toggle grouped buttons
- [Chip Groups](https://vuetifyjs.com/en/components/chip-groups/): v-chip-group selectable chips
- [Item Groups](https://vuetifyjs.com/en/components/item-groups/): v-item-group selection container
- [Slide Groups](https://vuetifyjs.com/en/components/slide-groups/): v-slide-group horizontal scroll
- [Carousels](https://vuetifyjs.com/en/components/carousels/): v-carousel image slider
- [Windows](https://vuetifyjs.com/en/components/windows/): v-window content transition
- [Steppers](https://vuetifyjs.com/en/components/steppers/): v-stepper multi-step flow

## Components - Feedback

- [Alerts](https://vuetifyjs.com/en/components/alerts/): v-alert notification banners
- [Snackbars](https://vuetifyjs.com/en/components/snackbars/): v-snackbar toast messages
- [Snackbar Queue](https://vuetifyjs.com/en/components/snackbar-queue/): v-snackbar-queue stacked toasts
- [Progress Circular](https://vuetifyjs.com/en/components/progress-circular/): v-progress-circular spinner
- [Progress Linear](https://vuetifyjs.com/en/components/progress-linear/): v-progress-linear loading bar
- [Skeleton Loaders](https://vuetifyjs.com/en/components/skeleton-loaders/): v-skeleton-loader placeholders
- [Ratings](https://vuetifyjs.com/en/components/ratings/): v-rating star rating
- [Banners](https://vuetifyjs.com/en/components/banners/): v-banner prominent messages
- [Badges](https://vuetifyjs.com/en/components/badges/): v-badge notification dot
- [Timelines](https://vuetifyjs.com/en/components/timelines/): v-timeline event display
- [Hover](https://vuetifyjs.com/en/components/hover/): v-hover state tracking
- [Empty States](https://vuetifyjs.com/en/components/empty-states/): v-empty-state placeholder

## Components - Images and Icons

- [Images](https://vuetifyjs.com/en/components/images/): v-img lazy loading images
- [Icons](https://vuetifyjs.com/en/components/icons/): v-icon SVG/font icons
- [Avatars](https://vuetifyjs.com/en/components/avatars/): v-avatar user images
- [Aspect Ratios](https://vuetifyjs.com/en/components/aspect-ratios/): v-responsive ratio container
- [Parallax](https://vuetifyjs.com/en/components/parallax/): v-parallax scroll effect

## Components - Pickers

- [Date Pickers](https://vuetifyjs.com/en/components/date-pickers/): v-date-picker calendar selection
- [Time Pickers](https://vuetifyjs.com/en/components/time-pickers/): v-time-picker clock selection
- [Color Pickers](https://vuetifyjs.com/en/components/color-pickers/): v-color-picker color selection

## Components - Providers

- [Defaults Providers](https://vuetifyjs.com/en/components/defaults-providers/): v-defaults-provider scoped defaults
- [Theme Providers](https://vuetifyjs.com/en/components/theme-providers/): v-theme-provider scoped themes
- [Locale Providers](https://vuetifyjs.com/en/components/locale-providers/): v-locale-provider scoped i18n

## Components - Layout

- [Application](https://vuetifyjs.com/en/components/application/): v-app root component
- [Grids](https://vuetifyjs.com/en/components/grids/): v-container, v-row, v-col 12-column grid
- [Lazy](https://vuetifyjs.com/en/components/lazy/): v-lazy viewport loading
- [No SSR](https://vuetifyjs.com/en/components/no-ssr/): v-no-ssr client-only rendering

## Directives

- [Ripple](https://vuetifyjs.com/en/directives/ripple/): v-ripple touch feedback
- [Click Outside](https://vuetifyjs.com/en/directives/click-outside/): v-click-outside event
- [Scroll](https://vuetifyjs.com/en/directives/scroll/): v-scroll listener
- [Intersect](https://vuetifyjs.com/en/directives/intersect/): v-intersect viewport detection
- [Resize](https://vuetifyjs.com/en/directives/resize/): v-resize element observer
- [Mutate](https://vuetifyjs.com/en/directives/mutate/): v-mutate DOM observer
- [Touch](https://vuetifyjs.com/en/directives/touch/): v-touch gesture events
- [Tooltip](https://vuetifyjs.com/en/directives/tooltip/): v-tooltip directive

## Labs (Experimental)

- [Introduction](https://vuetifyjs.com/en/labs/introduction/): About experimental components
- [Color Inputs](https://vuetifyjs.com/en/components/color-inputs/): v-color-input field
- [Date Inputs](https://vuetifyjs.com/en/components/date-inputs/): v-date-input field
- [File Upload](https://vuetifyjs.com/en/components/file-upload/): v-file-upload dropzone
- [Icon Buttons](https://vuetifyjs.com/en/components/icon-buttons/): v-icon-btn compact button
- [Mask Inputs](https://vuetifyjs.com/en/components/mask-inputs/): v-mask-input formatted input
- [Pie Charts](https://vuetifyjs.com/en/components/pie-charts/): v-pie-chart visualization
- [Pull to Refresh](https://vuetifyjs.com/en/components/pull-to-refresh/): v-pull-to-refresh mobile gesture
- [Vertical Steppers](https://vuetifyjs.com/en/components/vertical-steppers/): v-vertical-stepper
- [Videos](https://vuetifyjs.com/en/components/videos/): v-video player

## Resources

- [Brand Kit](https://vuetifyjs.com/en/resources/brand-kit/): Logos and assets
- [Made with Vuetify](https://vuetifyjs.com/en/resources/made-with-vuetify/): Showcase
- [Themes](https://vuetifyjs.com/en/resources/themes/): Premium templates
- [UI Kits](https://vuetifyjs.com/en/resources/ui-kits/): Figma and Sketch resources