# Vuetify

## Docs

- [Accessibility](https://mintlify.wiki/vuetifyjs/vuetify/advanced/accessibility.md): Build inclusive applications with Vuetify's accessibility features and ARIA support
- [Date Adapters](https://mintlify.wiki/vuetifyjs/vuetify/advanced/date-adapters.md): Integrate date libraries like date-fns, Day.js, Luxon, or Moment.js with Vuetify's date components
- [Server-Side Rendering (SSR)](https://mintlify.wiki/vuetifyjs/vuetify/advanced/ssr.md): Configure Vuetify for server-side rendering with Nuxt, Vite SSR, and custom SSR setups
- [Tree-shaking](https://mintlify.wiki/vuetifyjs/vuetify/advanced/treeshaking.md): Optimize your bundle size with automatic tree-shaking support in Vuetify 4
- [useDate()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/date.md): Composable for accessing date adapter functionality
- [useDefaults()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/defaults.md): Composable for accessing and applying component default props
- [useDisplay()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/display.md): Composable for accessing responsive breakpoint information and device detection
- [useGoTo()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/goto.md): Composable for programmatic scrolling with smooth animations
- [useIcon()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/icons.md): Composable for resolving and rendering icons from different icon sets
- [useLocale()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/locale.md): Composable for accessing and managing localization and RTL support
- [useTheme()](https://mintlify.wiki/vuetifyjs/vuetify/api/composables/theme.md): Composable for accessing and managing Vuetify's theme system
- [v-click-outside](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/click-outside.md): Directive for detecting clicks outside an element
- [v-intersect](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/intersect.md): Directive for detecting when an element enters or exits the viewport
- [v-resize](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/resize.md): Directive for detecting window resize events
- [v-ripple](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/ripple.md): Directive for adding Material Design ripple effects to elements
- [v-scroll](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/scroll.md): Directive for detecting scroll events on window or custom elements
- [v-tooltip](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/tooltip.md): Directive for adding tooltips to elements
- [v-touch](https://mintlify.wiki/vuetifyjs/vuetify/api/directives/touch.md): Directive for detecting touch gestures like swipe, pan, and directional movements
- [Color Utilities](https://mintlify.wiki/vuetifyjs/vuetify/api/utilities/colors.md): Utility functions and constants for color manipulation and conversion
- [Transition Utilities](https://mintlify.wiki/vuetifyjs/vuetify/api/utilities/transitions.md): Built-in transition components for animating element appearance and disappearance
- [Browser support](https://mintlify.wiki/vuetifyjs/vuetify/browser-support.md): Learn about Vuetify's browser compatibility, including supported browsers, polyfills, and responsive design requirements.
- [VAlert](https://mintlify.wiki/vuetifyjs/vuetify/components/alert.md): Alert component for displaying contextual feedback messages
- [VApp](https://mintlify.wiki/vuetifyjs/vuetify/components/app.md): The VApp component is the root wrapper for all Vuetify applications, providing the layout system foundation and theme support.
- [VAppBar](https://mintlify.wiki/vuetifyjs/vuetify/components/app-bar.md): The VAppBar component is a versatile toolbar that can be used for site navigation, with support for scroll behaviors, collapsing, and positioning.
- [VAutocomplete](https://mintlify.wiki/vuetifyjs/vuetify/components/autocomplete.md): Autocomplete component for searchable select inputs with filtering
- [Avatar](https://mintlify.wiki/vuetifyjs/vuetify/components/avatar.md): The VAvatar component displays a circular user representation with support for images, icons, text, and badges.
- [Avatar Group](https://mintlify.wiki/vuetifyjs/vuetify/components/avatar-group.md): The VAvatarGroup component displays multiple avatars in a group with overflow handling and customization options.
- [Badge](https://mintlify.wiki/vuetifyjs/vuetify/components/badge.md): The VBadge component displays a small badge typically used to show notifications, counts, or status on other components.
- [Banner](https://mintlify.wiki/vuetifyjs/vuetify/components/banner.md): The VBanner component displays a prominent message and related optional actions.
- [VBottomNavigation](https://mintlify.wiki/vuetifyjs/vuetify/components/bottom-navigation.md): The VBottomNavigation component is a navigation element typically used on mobile devices, providing quick access to top-level destinations.
- [Bottom Sheet](https://mintlify.wiki/vuetifyjs/vuetify/components/bottom-sheet.md): The VBottomSheet component displays a sheet that slides up from the bottom of the screen.
- [VBreadcrumbs](https://mintlify.wiki/vuetifyjs/vuetify/components/breadcrumbs.md): Navigation component that shows the current page's location in a hierarchy.
- [VBtn](https://mintlify.wiki/vuetifyjs/vuetify/components/btn.md): Button component with multiple variants and styles
- [VBtnGroup](https://mintlify.wiki/vuetifyjs/vuetify/components/btn-group.md): Group buttons together with consistent styling
- [VBtnToggle](https://mintlify.wiki/vuetifyjs/vuetify/components/btn-toggle.md): Toggle button group with selection state management
- [Calendar](https://mintlify.wiki/vuetifyjs/vuetify/components/calendar.md): The VCalendar component displays events in a calendar format with multiple view modes including month, week, day, and category views.
- [Card](https://mintlify.wiki/vuetifyjs/vuetify/components/card.md): The VCard component is a versatile content container with multiple variants and features for displaying grouped information.
- [Carousel](https://mintlify.wiki/vuetifyjs/vuetify/components/carousel.md): The VCarousel component is used to display rotating content in a slideshow format with navigation controls and progress indicators.
- [VCheckbox](https://mintlify.wiki/vuetifyjs/vuetify/components/checkbox.md): Checkbox component for boolean input with indeterminate state support
- [Chip](https://mintlify.wiki/vuetifyjs/vuetify/components/chip.md): The VChip component displays small, compact elements that represent an input, attribute, or action.
- [Chip Group](https://mintlify.wiki/vuetifyjs/vuetify/components/chip-group.md): The VChipGroup component groups multiple chips together for filtering or selection.
- [Color Input](https://mintlify.wiki/vuetifyjs/vuetify/components/color-input.md): The VColorInput component combines a text field with a color picker for seamless color selection and input.
- [Color Picker](https://mintlify.wiki/vuetifyjs/vuetify/components/color-picker.md): The VColorPicker component provides an interactive interface for selecting colors with support for multiple color formats and swatches.
- [VCombobox](https://mintlify.wiki/vuetifyjs/vuetify/components/combobox.md): Combobox component that combines autocomplete with the ability to enter custom values
- [Command Palette](https://mintlify.wiki/vuetifyjs/vuetify/components/command-palette.md): The VCommandPalette component provides a keyboard-driven command interface for quick navigation and actions.
- [Data Table](https://mintlify.wiki/vuetifyjs/vuetify/components/data-table.md): The VDataTable component displays tabular data with features like sorting, pagination, selection, and grouping.
- [Date Input](https://mintlify.wiki/vuetifyjs/vuetify/components/date-input.md): The VDateInput component combines a text field with a date picker for convenient date selection and manual input.
- [Date Picker](https://mintlify.wiki/vuetifyjs/vuetify/components/date-picker.md): The VDatePicker component provides an intuitive interface for selecting dates with support for single dates, multiple dates, and date ranges.
- [VDialog](https://mintlify.wiki/vuetifyjs/vuetify/components/dialog.md): Dialog component for modal windows and confirmations
- [Divider](https://mintlify.wiki/vuetifyjs/vuetify/components/divider.md): The VDivider component displays a thin line to separate content sections.
- [Empty State](https://mintlify.wiki/vuetifyjs/vuetify/components/empty-state.md): The VEmptyState component displays helpful messaging when there is no content to show.
- [Expansion Panel](https://mintlify.wiki/vuetifyjs/vuetify/components/expansion-panel.md): The VExpansionPanel component provides a collapsible content area for organizing information.
- [VFab](https://mintlify.wiki/vuetifyjs/vuetify/components/fab.md): Floating Action Button component for primary actions
- [VFileInput](https://mintlify.wiki/vuetifyjs/vuetify/components/file-input.md): File input component with drag-and-drop support and file validation
- [File Upload](https://mintlify.wiki/vuetifyjs/vuetify/components/file-upload.md): The VFileUpload component provides drag-and-drop file uploading with preview, validation, and customization options.
- [VFooter](https://mintlify.wiki/vuetifyjs/vuetify/components/footer.md): The VFooter component is used to display general information that a user might want to access from any page within your site.
- [VForm](https://mintlify.wiki/vuetifyjs/vuetify/components/forms.md): Form component for validation and form state management
- [Grid System](https://mintlify.wiki/vuetifyjs/vuetify/components/grid.md): Vuetify's grid system uses a 12-point system for layout with VContainer, VRow, and VCol components built on flexbox.
- [VIcon](https://mintlify.wiki/vuetifyjs/vuetify/components/icon.md): Icon component with support for multiple icon sets
- [Icon Button](https://mintlify.wiki/vuetifyjs/vuetify/components/icon-btn.md): The VIconBtn component provides an enhanced icon button with toggle states, loading indicators, and size variants.
- [Image](https://mintlify.wiki/vuetifyjs/vuetify/components/image.md): The VImg component provides advanced image loading with lazy loading, aspect ratio, transitions, and error handling.
- [Labs Overview](https://mintlify.wiki/vuetifyjs/vuetify/components/labs-overview.md): Experimental Vuetify components that are in active development and testing before graduating to the main component library.
- [List](https://mintlify.wiki/vuetifyjs/vuetify/components/list.md): The VList component displays a collection of items in a vertical format with support for navigation, selection, and nesting.
- [Main](https://mintlify.wiki/vuetifyjs/vuetify/components/main.md): The VMain component is the primary content area wrapper in Vuetify's layout system.
- [Mask Input](https://mintlify.wiki/vuetifyjs/vuetify/components/mask-input.md): The VMaskInput component provides formatted text input with customizable masking patterns for phone numbers, dates, and more.
- [VMenu](https://mintlify.wiki/vuetifyjs/vuetify/components/menu.md): Contextual overlay component for displaying options and actions.
- [VNavigationDrawer](https://mintlify.wiki/vuetifyjs/vuetify/components/navigation-drawer.md): The VNavigationDrawer component is a slide-out navigation panel that can be permanent or temporary, with support for mini variant, rail mode, and touch gestures.
- [Number Input](https://mintlify.wiki/vuetifyjs/vuetify/components/number-input.md): The VNumberInput component provides a specialized text field with increment/decrement controls for numeric values.
- [OTP Input](https://mintlify.wiki/vuetifyjs/vuetify/components/otp-input.md): The VOtpInput component provides a specialized input for one-time passwords and verification codes.
- [VOverlay](https://mintlify.wiki/vuetifyjs/vuetify/components/overlay.md): Overlay component for creating backdrop layers and popups
- [VPagination](https://mintlify.wiki/vuetifyjs/vuetify/components/pagination.md): Navigation component for paginating large datasets.
- [Parallax](https://mintlify.wiki/vuetifyjs/vuetify/components/parallax.md): The VParallax component creates a parallax scrolling effect where the image moves at a different speed than the scroll.
- [VProgressCircular](https://mintlify.wiki/vuetifyjs/vuetify/components/progress-circular.md): Circular progress indicator for loading states
- [VProgressLinear](https://mintlify.wiki/vuetifyjs/vuetify/components/progress-linear.md): Linear progress indicator for loading states and progress tracking
- [VRadio & VRadioGroup](https://mintlify.wiki/vuetifyjs/vuetify/components/radio.md): Radio button components for single selection from a group of options
- [Range Slider](https://mintlify.wiki/vuetifyjs/vuetify/components/range-slider.md): The VRangeSlider component provides a dual-handle slider for selecting a range of values.
- [Rating](https://mintlify.wiki/vuetifyjs/vuetify/components/rating.md): The VRating component provides an interactive star rating interface.
- [VSelect](https://mintlify.wiki/vuetifyjs/vuetify/components/select.md): Select component for choosing from a list of options
- [Sheet](https://mintlify.wiki/vuetifyjs/vuetify/components/sheet.md): The VSheet component is a flexible container with elevation, border, and positioning utilities.
- [VSkeletonLoader](https://mintlify.wiki/vuetifyjs/vuetify/components/skeleton-loader.md): Skeleton loader component for placeholder content while loading
- [Slide Group](https://mintlify.wiki/vuetifyjs/vuetify/components/slide-group.md): The VSlideGroup component provides a scrollable container for grouping items with overflow navigation.
- [VSlider](https://mintlify.wiki/vuetifyjs/vuetify/components/slider.md): Slider component for selecting a numeric value from a range
- [VSnackbar](https://mintlify.wiki/vuetifyjs/vuetify/components/snackbar.md): Snackbar component for brief notifications and messages
- [VSpeedDial](https://mintlify.wiki/vuetifyjs/vuetify/components/speed-dial.md): Speed dial component for contextual action menus
- [VStepper](https://mintlify.wiki/vuetifyjs/vuetify/components/stepper.md): Multi-step navigation component for guiding users through processes.
- [VSwitch](https://mintlify.wiki/vuetifyjs/vuetify/components/switch.md): Switch component for toggling between on/off states
- [System Bar](https://mintlify.wiki/vuetifyjs/vuetify/components/system-bar.md): The VSystemBar component displays a bar at the top of the application mimicking a system status bar.
- [Table](https://mintlify.wiki/vuetifyjs/vuetify/components/table.md): The VTable component provides a simple wrapper for creating HTML tables with Vuetify styling.
- [VTabs](https://mintlify.wiki/vuetifyjs/vuetify/components/tabs.md): Navigation component for switching between grouped content.
- [VTextField](https://mintlify.wiki/vuetifyjs/vuetify/components/text-field.md): Text field component for single-line text input
- [VTextarea](https://mintlify.wiki/vuetifyjs/vuetify/components/textarea.md): Textarea component for multi-line text input with auto-grow support
- [Time Picker](https://mintlify.wiki/vuetifyjs/vuetify/components/time-picker.md): The VTimePicker component provides an interactive clock interface for selecting time values with support for both 12-hour and 24-hour formats.
- [Timeline](https://mintlify.wiki/vuetifyjs/vuetify/components/timeline.md): The VTimeline component displays a series of events in chronological order with customizable alignment and styling.
- [VToolbar](https://mintlify.wiki/vuetifyjs/vuetify/components/toolbar.md): The VToolbar component is a flexible container for headers, toolbars, and action bars with support for extensions and images.
- [Tooltip](https://mintlify.wiki/vuetifyjs/vuetify/components/tooltip.md): The VTooltip component displays helpful information when users hover over, focus on, or tap an element.
- [Treeview](https://mintlify.wiki/vuetifyjs/vuetify/components/treeview.md): The VTreeview component displays hierarchical data in an expandable tree structure.
- [Window](https://mintlify.wiki/vuetifyjs/vuetify/components/window.md): The VWindow component provides a slideshow-like interface for cycling through content.
- [Framework Architecture](https://mintlify.wiki/vuetifyjs/vuetify/concepts/framework-architecture.md): Understanding Vuetify's core architecture, plugin system, and composable-based design
- [Icon System](https://mintlify.wiki/vuetifyjs/vuetify/concepts/icons.md): Comprehensive guide to Vuetify's flexible icon system supporting multiple icon libraries
- [Internationalization](https://mintlify.wiki/vuetifyjs/vuetify/concepts/internationalization.md): Build multilingual applications with Vuetify's comprehensive i18n system supporting 43+ languages
- [Responsive Layout](https://mintlify.wiki/vuetifyjs/vuetify/concepts/responsive-layout.md): Master Vuetify's responsive breakpoint system and display utilities
- [Theme System](https://mintlify.wiki/vuetifyjs/vuetify/concepts/theme-system.md): Deep dive into Vuetify's powerful theme system, custom themes, and dynamic theming
- [Blueprints](https://mintlify.wiki/vuetifyjs/vuetify/customization/blueprints.md): Use Vuetify blueprints to quickly apply Material Design 1, 2, or 3 styling and component defaults.
- [Presets & Defaults](https://mintlify.wiki/vuetifyjs/vuetify/customization/presets.md): Configure component defaults and create reusable presets for consistent styling across your Vuetify application.
- [SASS Variables](https://mintlify.wiki/vuetifyjs/vuetify/customization/sass-variables.md): Customize Vuetify's global styles using SASS variables to control typography, spacing, borders, and more.
- [Theme Configuration](https://mintlify.wiki/vuetifyjs/vuetify/customization/theme-configuration.md): Configure Vuetify's theme system to customize colors, dark mode, and CSS variables at runtime.
- [Installation](https://mintlify.wiki/vuetifyjs/vuetify/installation.md): Install Vuetify using your preferred package manager. Quick setup with Vite, Nuxt, or Laravel.
- [Introduction](https://mintlify.wiki/vuetifyjs/vuetify/introduction.md): Vuetify is a Vue UI library with beautifully handcrafted components. Build amazing applications with no design skills required.
- [Long-term Support](https://mintlify.wiki/vuetifyjs/vuetify/migration/long-term-support.md): Vuetify's Long-term Support (LTS) policy and version support lifecycle
- [Upgrading to v4](https://mintlify.wiki/vuetifyjs/vuetify/migration/upgrading-to-v4.md): Complete guide for migrating your Vuetify application from v3 to v4
- [Quick start](https://mintlify.wiki/vuetifyjs/vuetify/quickstart.md): Build your first Vuetify application with this complete working example. Learn the basics of component usage and theming.
- [Changelog](https://mintlify.wiki/vuetifyjs/vuetify/resources/changelog.md): View the changelog and release notes for all Vuetify versions.
- [Contributing to Vuetify](https://mintlify.wiki/vuetifyjs/vuetify/resources/contributing.md): Learn how to contribute to Vuetify and help make it even better.
- [Vuetify Ecosystem](https://mintlify.wiki/vuetifyjs/vuetify/resources/ecosystem.md): Explore the tools and resources in the Vuetify ecosystem.
- [Roadmap](https://mintlify.wiki/vuetifyjs/vuetify/resources/roadmap.md): Explore the future plans and development roadmap for Vuetify.
- [Sponsorship](https://mintlify.wiki/vuetifyjs/vuetify/resources/sponsorship.md): Support Vuetify development through sponsorship and get exclusive perks.
- [Getting Support](https://mintlify.wiki/vuetifyjs/vuetify/resources/support.md): Find help and support for Vuetify through our community channels and issue tracker.