# Vuetify — A Vue Component Framework > Markdown mirror of DialtoneApp's public top-site detail page for `vuetifyjs.com`. URL: https://dialtoneapp.com/top-sites/vuetifyjs.com/index.md Canonical HTML: https://dialtoneapp.com/top-sites/vuetifyjs.com ## Summary - Domain: `vuetifyjs.com` - Website: https://vuetifyjs.com - Description: ai readable | score 16 | purchase read only - Label: ai_readable - Payment surface: Not available - Purchase boundary: read_only - Control boundary: unknown - Rank: 77637 ## robots ~~~text User-agent: * Allow: / Sitemap: https://vuetifyjs.com/sitemap.xml ~~~ ## llms ~~~text # 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 ~~~ ## llms-full Not found.