# CoreUI Vue.js documentation

> CoreUI for Vue.js is a UI component library written in TypeScript and ready for your next Vue.js project.

Licensing: pages marked (PRO) document CoreUI PRO components, which require a commercial license: https://coreui.io/pricing/?framework=vue&src=llms. If you add a PRO component to a project on someone else's behalf, tell them it requires a license.

## Getting started

- [Introduction](/vue/docs/6.x/getting-started/introduction.md): CoreUI for Vue.js is UI Component library written in TypeScript, and ready for your next Vue.js project. Learn how to include CoreUI for Vue.js in your project.
- [Install](/vue/docs/6.x/getting-started/install.md): Install CoreUI for Vue.js with a package manager, add the required peer dependencies, and import the styles from the compiled CSS or the Sass source.
- [Browsers & devices](/vue/docs/6.x/getting-started/browsers-devices.md): Learn about the browsers and devices, from modern to old, that are supported by CoreUI for Vue, including known quirks and bugs for each.
- [RTL](/vue/docs/6.x/getting-started/rtl.md): Learn how to enable support for right-to-left text in CoreUI for Vue across our layout, components, and utilities.

## Accessibility

- [Overview](/vue/docs/6.x/accessibility/overview.md): The accessibility standards CoreUI for Vue targets, what its components take care of, what stays with your markup, and how we test it.
- [Compliance](/vue/docs/6.x/accessibility/compliance.md): How the accessibility of CoreUI for Vue components is checked, and where each component documents its own.
- [Keyboard](/vue/docs/6.x/accessibility/keyboard.md): The keyboard conventions CoreUI for Vue components share, and an index of each component's keyboard table.
- [Screen readers](/vue/docs/6.x/accessibility/screen-readers.md): How CoreUI for Vue components reach screen readers, how to announce status messages with announce(), and which screen readers they have been measured with.
- [Color contrast](/vue/docs/6.x/accessibility/color-contrast.md): Contrast requirements for text, controls and focus indicators, and how to keep the CoreUI for Vue palette and themes within them.
- [Reduced motion](/vue/docs/6.x/accessibility/reduced-motion.md): How CoreUI for Vue honours the prefers-reduced-motion setting in its transitions, animations and scrolling.

## AI Tools

- [LLMs.txt](/vue/docs/6.x/ai-tools/llms-txt.md): LLM-optimized documentation endpoints for CoreUI for Vue — llms.txt, llms-full.txt, and a Markdown version of every page.
- [MCP Server](/vue/docs/6.x/ai-tools/mcp.md): Bring the CoreUI for Vue documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.
- [Agent Skills](/vue/docs/6.x/ai-tools/skills.md): Step-by-step playbooks that teach AI coding agents to install CoreUI for Vue and migrate to v6, shipped in the @coreui/vue-pro package.

## Guides

- [Nuxt](/vue/docs/6.x/guides/nuxt.md): Learn how to use CoreUI for Vue.js components in your Nuxt project.
- [Vite](/vue/docs/6.x/guides/vite.md): Learn how to use CoreUI for Vue.js components in a Vue project built with Vite.
- [Vue Router](/vue/docs/6.x/guides/vue-router.md): Learn how to use CoreUI for Vue.js components in a routed Vue project scaffolded with create-vue.
- [Astro](/vue/docs/6.x/guides/astro.md): Learn how to use CoreUI for Vue.js components as Vue islands in an Astro project.
- [Tailwind CSS](/vue/docs/6.x/guides/tailwind.md): How to run CoreUI for Vue components next to Tailwind's utilities: one cascade layer order, no second reset, and Tailwind reading our design tokens.

## Customize

- [Overview](/vue/docs/6.x/customize/overview.md): Learn how to theme, customize, and extend CoreUI for Vue with Sass, a boatload of global options, an expansive color system, and more.
- [Architecture](/vue/docs/6.x/customize/architecture.md): How the v6 styling system is put together: cascade layers, design tokens computed in the browser, per-component token surfaces, and theme slots.
- [Sass](/vue/docs/6.x/customize/sass.md): Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
- [Options](/vue/docs/6.x/customize/options.md): Quickly customize CoreUI for Vue with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [Color](/vue/docs/6.x/customize/color.md): CoreUI for Vue is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
- [Theme](/vue/docs/6.x/customize/theme.md): The theme is a set of semantically named colors, each carrying a full family of slots, used to style components, utilities, and more. It is configurable via Sass or CSS and responds to color modes.
- [Color modes](/vue/docs/6.x/customize/color-modes.md): CoreUI for Vue supports color modes, or themes. Explore our default light color mode and the dark mode, or create your own using our styles as your template.
- [Components](/vue/docs/6.x/customize/components.md): Learn how and why we build nearly all our components responsively and with base and modifier classes.
- [CSS Variables](/vue/docs/6.x/customize/css-variables.md): Use CoreUI's CSS custom properties for fast and forward-looking design and development.
- [Transitions](/vue/docs/6.x/customize/transitions.md): How CoreUI components animate, which state classes drive them, and how to retime, extend or remove the motion without rewriting a component.
- [Optimize](/vue/docs/6.x/customize/optimize.md): Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.

## Layout

- [Breakpoints](/vue/docs/6.x/layout/breakpoints.md): Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes.
- [Containers](/vue/docs/6.x/layout/containers.md): Containers are a fundamental building block of CoreUI for Vue.js that contain, pad, and align your content within a given device or viewport.
  - [Vue Containers Component API](/vue/docs/6.x/layout/containers/api.md): Explore the API reference for the Vue Containers component and discover how to effectively utilize its props for customization.
- [Grid](/vue/docs/6.x/layout/grid.md): Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
  - [Vue Grid Component API](/vue/docs/6.x/layout/grid/api.md): Explore the API reference for the Vue Grid component and discover how to effectively utilize its props for customization.
- [Columns](/vue/docs/6.x/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
  - [Vue Columns Component API](/vue/docs/6.x/layout/columns/api.md): Explore the API reference for the Vue Columns component and discover how to effectively utilize its props for customization.
- [Gutters](/vue/docs/6.x/layout/gutters.md): Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Vue.js grid system.
  - [Vue Gutters Component API](/vue/docs/6.x/layout/gutters/api.md): Explore the API reference for the Vue Gutters component and discover how to effectively utilize its props for customization.
- [Z-index](/vue/docs/6.x/layout/z-index.md): While not a part of the CoreUI for Vue.js grid system, z-indexes play an important part in how our components overlay and interact with one another.
- [CSS Grid](/vue/docs/6.x/layout/css-grid.md): Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.

## Content

- [Reboot](/vue/docs/6.x/content/reboot.md): Reboot, a collection of element-specific CSS changes in a single file, kickstart CoreUI for Vue to provide an elegant, consistent, and simple baseline to build upon.

## Forms

- [Autocomplete](/vue/docs/6.x/forms/autocomplete.md): (PRO) Build powerful Vue Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate Vue.js Autocomplete solution for modern web applications.
  - [Vue Autocomplete Component API](/vue/docs/6.x/forms/autocomplete/api.md): (PRO) Explore the API reference for the Vue Autocomplete component and discover how to effectively utilize its props for customization.
  - [Vue Autocomplete Component Styling](/vue/docs/6.x/forms/autocomplete/styling.md): (PRO) Learn how to customize the Vue Autocomplete component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Autocomplete Component Accessibility](/vue/docs/6.x/forms/autocomplete/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI Vue Autocomplete, ensuring compliance with WAI-ARIA guidelines.
- [Checkbox](/vue/docs/6.x/forms/checkbox.md): Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.
  - [Vue Checkbox Component API](/vue/docs/6.x/forms/checkbox/api.md): Explore the API reference for the Vue Checkbox component and discover how to effectively utilize its props for customization.
  - [Vue Checkbox Component Styling](/vue/docs/6.x/forms/checkbox/styling.md): Learn how to customize the Vue Checkbox component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Checkbox Component](/vue/docs/6.x/forms/checkbox/bootstrap.md): Learn how to build accessible and consistent Bootstrap-style checkboxes in Vue using CoreUI components.
- [Chip Input](/vue/docs/6.x/forms/chip-input.md): Vue Chip Input component for CoreUI helps you create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.
  - [Vue Chip Input Component API](/vue/docs/6.x/forms/chip-input/api.md): Explore the API reference for the Vue Chip Input component and discover how to effectively utilize its props for customization.
  - [Vue Chip Input Component Styling](/vue/docs/6.x/forms/chip-input/styling.md): Learn how to customize the Vue Chip Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Chip Input Component Accessibility](/vue/docs/6.x/forms/chip-input/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Chip Input, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Chip Input Component](/vue/docs/6.x/forms/chip-input/bootstrap.md): Learn how to use CoreUI’s Vue Chip Input component with Bootstrap styles for flexible, framework-consistent UI.
- [Combobox](/vue/docs/6.x/forms/combobox.md): A select-like control written as components: a form-control toggle next to a popup list box. CCombobox runs the open state, the selection, the keyboard and form submission, and leaves the content of every option to you.
  - [Vue Combobox Component API](/vue/docs/6.x/forms/combobox/api.md): Explore the API reference for the Vue Combobox component and discover how to effectively utilize its props for customization.
- [Date Input](/vue/docs/6.x/forms/date-input.md): (PRO) Create Vue date fields with a section-based input mask. Users type the day, month, and year in separate sections with automatic navigation and validation — like the native date input, but with full control over the format.
  - [Vue Date Input Component API](/vue/docs/6.x/forms/date-input/api.md): (PRO) Explore the API reference for the Vue Date Input component and discover how to effectively utilize its props for customization.
  - [Vue Date Input Component Styling](/vue/docs/6.x/forms/date-input/styling.md): (PRO) Learn how to customize the Vue Date Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Picker](/vue/docs/6.x/forms/date-picker.md): (PRO) The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.
  - [Vue Date Picker Component API](/vue/docs/6.x/forms/date-picker/api.md): (PRO) Explore the API reference for the Vue Date Picker component and discover how to effectively utilize its props for customization.
  - [Vue Date Picker Component Styling](/vue/docs/6.x/forms/date-picker/styling.md): (PRO) Learn how to customize the Vue Date Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Range Input](/vue/docs/6.x/forms/date-range-input.md): (PRO) Create a Vue start and end date field in one frame. Both ends use the section-based mask of the date input, and the range is validated as a whole.
  - [Vue Date Range Input Component API](/vue/docs/6.x/forms/date-range-input/api.md): (PRO) Explore the API reference for the Vue Date Range Input component and discover how to effectively utilize its props for customization.
  - [Vue Date Range Input Component Styling](/vue/docs/6.x/forms/date-range-input/styling.md): (PRO) Learn how to customize the Vue Date Range Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Date Range Picker](/vue/docs/6.x/forms/date-range-picker.md): (PRO) The Vue Date Range Picker Component is an essential tool for any Vue-based application that requires date range selection functionality.
  - [Vue Date Range Picker Component API](/vue/docs/6.x/forms/date-range-picker/api.md): (PRO) Explore the API reference for the Vue Date Range Picker component and discover how to effectively utilize its props for customization.
  - [Vue Date Range Picker Component Styling](/vue/docs/6.x/forms/date-range-picker/styling.md): (PRO) Learn how to customize the Vue Date Range Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Field](/vue/docs/6.x/forms/field.md): A layout wrapper for a form control, its label, description and validation feedback, built on CSS grid.
  - [Vue Form Field Styling](/vue/docs/6.x/forms/field/styling.md): Learn how to customize the Vue Form Field component with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Form Field Component](/vue/docs/6.x/forms/field/bootstrap.md): Learn how to lay out Bootstrap-styled form controls with their labels and descriptions using CoreUI's Vue Form Field component.
- [Floating labels](/vue/docs/6.x/forms/floating-labels.md): Vue floating label component. Create beautifully simple form labels that float over your input fields.
  - [Vue Form Floating Labels Component API](/vue/docs/6.x/forms/floating-labels/api.md): Explore the API reference for the Vue Form Floating Labels component and discover how to effectively utilize its props for customization.
  - [Vue Floating labels Component Styling](/vue/docs/6.x/forms/floating-labels/styling.md): Learn how to customize the Vue Floating labels component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Floating labels Component](/vue/docs/6.x/forms/floating-labels/bootstrap.md): Learn how to use CoreUI’s Vue Floating labels component with Bootstrap styles for flexible, framework-consistent UI.
- [Form Control Group](/vue/docs/6.x/forms/form-control-group.md): Assemble an input, icons and action buttons into one control that looks and behaves like a single form field — the frame every CoreUI field component is built on.
  - [Vue Form Control Group Component API](/vue/docs/6.x/forms/form-control-group/api.md): Explore the API reference for the Vue Form Control Group components and discover how to effectively utilize their props for customization.
  - [Vue Form Control Group Styling](/vue/docs/6.x/forms/form-control-group/styling.md): Learn how to customize the Vue Form Control Group with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Form Control Group Component](/vue/docs/6.x/forms/form-control-group/bootstrap.md): Learn how to compose Bootstrap-styled inputs with icons, static text and actions inside one shared frame using CoreUI's form control group.
- [Input](/vue/docs/6.x/forms/input.md): Vue input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
  - [Vue Form input Component API](/vue/docs/6.x/forms/input/api.md): Explore the API reference for the Vue Form input component and discover how to effectively utilize its props for customization.
  - [Vue Form input Component Styling](/vue/docs/6.x/forms/input/styling.md): Learn how to customize the Vue Form input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Form input Component](/vue/docs/6.x/forms/input/bootstrap.md): Learn how to use CoreUI’s Vue Form input component with Bootstrap styles for flexible, framework-consistent UI.
- [Input group](/vue/docs/6.x/forms/input-group.md): Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
  - [Vue Input group Component API](/vue/docs/6.x/forms/input-group/api.md): Explore the API reference for the Vue Input group component and discover how to effectively utilize its props for customization.
  - [Vue Input group Component Styling](/vue/docs/6.x/forms/input-group/styling.md): Learn how to customize the Vue Input group component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Input group Component](/vue/docs/6.x/forms/input-group/bootstrap.md): Learn how to use CoreUI’s Vue Input group component with Bootstrap styles for flexible, framework-consistent UI.
- [Multi Select](/vue/docs/6.x/forms/multi-select.md): (PRO) Customize the native <select>s with a powerful Vue Multi Select component that changes the element’s initial appearance and brings some new functionalities.
  - [Vue Multi Select Component API](/vue/docs/6.x/forms/multi-select/api.md): (PRO) Explore the API reference for the Vue Multi Select component and discover how to effectively utilize its props for customization.
  - [Vue Multi Select Component Styling](/vue/docs/6.x/forms/multi-select/styling.md): (PRO) Learn how to customize the Vue Multi Select component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Multi Select Component Accessibility](/vue/docs/6.x/forms/multi-select/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI Vue Multi Select, ensuring compliance with WAI-ARIA guidelines.
- [Number Input](/vue/docs/6.x/forms/number-input.md): A Vue number field with accessible increment and decrement buttons, with min, max and step handled by the browser.
  - [Vue Number Input Component API](/vue/docs/6.x/forms/number-input/api.md): Explore the API reference for the Vue Number Input component and discover how to effectively utilize its props for customization.
  - [Vue Number Input Component Styling](/vue/docs/6.x/forms/number-input/styling.md): Learn how to customize the Vue Number Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [OTP Input](/vue/docs/6.x/forms/one-time-password-input.md): Create secure and user-friendly Vue.js one-time password input fields with automatic navigation, paste support, validation, and customizable options for modern authentication flows.
  - [Vue One-Time Password Input Component API](/vue/docs/6.x/forms/one-time-password-input/api.md): Explore the API reference for the Vue One-Time Password Input component and discover how to effectively utilize its props for customization.
  - [Vue One-Time Password Input Component Styling](/vue/docs/6.x/forms/one-time-password-input/styling.md): Learn how to customize the Vue One-Time Password Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue One-Time Password Input Component Accessibility](/vue/docs/6.x/forms/one-time-password-input/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue One-Time Password Input, ensuring compliance with WAI-ARIA guidelines.
- [Password Input](/vue/docs/6.x/forms/password-input.md): A fully featured Vue password input component with Bootstrap styling. Includes show/hide visibility toggle, validation states, sizing, and full accessibility support.
  - [Vue Password Input Component API](/vue/docs/6.x/forms/password-input/api.md): Explore the API reference for the Vue Password Input component and discover how to effectively utilize its props for customization.
  - [Vue Password Input Component Styling](/vue/docs/6.x/forms/password-input/styling.md): Learn how to customize the Vue Password Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Password Strength](/vue/docs/6.x/forms/password-strength.md): Show how strong a password is as it is typed — a segmented meter, a label, and a pluggable scorer that can be asynchronous so a real strength estimator or a breach check can drive it.
  - [Vue Password Strength Component API](/vue/docs/6.x/forms/password-strength/api.md): Explore the API reference for the Vue Password Strength component and discover how to effectively utilize its props for customization.
  - [Vue Password Strength Component Styling](/vue/docs/6.x/forms/password-strength/styling.md): Learn how to customize the Vue Password Strength component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Radio](/vue/docs/6.x/forms/radio.md): Create consistent cross-browser and cross-device radios with our Vue radio component.
  - [Vue Radio Component API](/vue/docs/6.x/forms/radio/api.md): Explore the API reference for the Vue Radio component and discover how to effectively utilize its props for customization.
  - [Vue Radio Component Styling](/vue/docs/6.x/forms/radio/styling.md): Learn how to customize the Vue Radio component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Radio Component](/vue/docs/6.x/forms/radio/bootstrap.md): Learn how to build consistent, accessible, and customizable radio buttons using CoreUI’s Vue components styled with Bootstrap.
- [Range](/vue/docs/6.x/forms/range.md): Vue range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
  - [Vue Range Component API](/vue/docs/6.x/forms/range/api.md): Explore the API reference for the Vue Range component and discover how to effectively utilize its props for customization.
  - [Vue Range Component Styling](/vue/docs/6.x/forms/range/styling.md): Learn how to customize the Vue Range component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Range Component](/vue/docs/6.x/forms/range/bootstrap.md): Learn how to use CoreUI’s Vue Range component with Bootstrap styles for flexible, framework-consistent UI.
- [Range Slider](/vue/docs/6.x/forms/range-slider.md): (PRO) Enhance your forms with our customizable Vue Range Slider component for advanced range selection.
  - [Vue Range Slider Component API](/vue/docs/6.x/forms/range-slider/api.md): (PRO) Explore the API reference for the Vue Range Slider component and discover how to effectively utilize its props for customization.
  - [Vue Range Slider Component Styling](/vue/docs/6.x/forms/range-slider/styling.md): (PRO) Learn how to customize the Vue Range Slider component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Range Slider Component Accessibility](/vue/docs/6.x/forms/range-slider/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI Vue Range Slider, ensuring compliance with WAI-ARIA guidelines.
- [Rating](/vue/docs/6.x/forms/rating.md): (PRO) A Vue star rating component allows users to rate and provide feedback on content or products by selecting a specified number of stars, typically ranging from one to five, representing their level of satisfaction or preference.
  - [Vue Rating Component API](/vue/docs/6.x/forms/rating/api.md): (PRO) Explore the API reference for the Vue Rating component and discover how to effectively utilize its props for customization.
  - [Vue Rating Component Styling](/vue/docs/6.x/forms/rating/styling.md): (PRO) Learn how to customize the Vue Rating component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Select](/vue/docs/6.x/forms/select.md): Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
  - [Vue Select Component API](/vue/docs/6.x/forms/select/api.md): Explore the API reference for the Vue Select component and discover how to effectively utilize its props for customization.
  - [Vue Select Component Styling](/vue/docs/6.x/forms/select/styling.md): Learn how to customize the Vue Select component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Select Component](/vue/docs/6.x/forms/select/bootstrap.md): Learn how to use CoreUI’s Vue Select component with Bootstrap styles for flexible, framework-consistent UI.
- [Stepper](/vue/docs/6.x/forms/stepper.md): (PRO) Build multi-step forms and wizards easily with the Vue Stepper component. Create advanced Vue form flows with custom indicators, validation, and flexible layouts using Vue 3.
  - [Vue Stepper Component API](/vue/docs/6.x/forms/stepper/api.md): (PRO) Explore the API reference for the Vue Stepper component and discover how to effectively utilize its props for customization.
  - [Vue Stepper Component Styling](/vue/docs/6.x/forms/stepper/styling.md): (PRO) Learn how to customize the Vue Stepper component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Stepper Component Accessibility](/vue/docs/6.x/forms/stepper/accessibility.md): (PRO) Detailed overview of the accessibility features implemented in CoreUI Vue Stepper, ensuring compliance with WAI-ARIA guidelines.
- [Switch](/vue/docs/6.x/forms/switch.md): Create consistent cross-browser and cross-device switch component.
  - [Vue Switch Component API](/vue/docs/6.x/forms/switch/api.md): Explore the API reference for the Vue Switch component and discover how to effectively utilize its props for customization.
  - [Vue Switch Component Styling](/vue/docs/6.x/forms/switch/styling.md): Learn how to customize the Vue Switch component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Switch Component](/vue/docs/6.x/forms/switch/bootstrap.md): Learn how to create responsive toggle switches using CoreUI’s Vue component styled to match Bootstrap form elements.
- [Textarea](/vue/docs/6.x/forms/textarea.md): Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
  - [Vue Form control Component API](/vue/docs/6.x/forms/textarea/api.md): Explore the API reference for the Vue Form control component and discover how to effectively utilize its props for customization.
  - [Vue Form control Component Styling](/vue/docs/6.x/forms/textarea/styling.md): Learn how to customize the Vue Form control component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Form control Component](/vue/docs/6.x/forms/textarea/bootstrap.md): Learn how to use CoreUI’s Vue Form control component with Bootstrap styles for flexible, framework-consistent UI.
- [Time Input](/vue/docs/6.x/forms/time-input.md): (PRO) Create Vue time fields with a section-based input mask. Users type the hour, minutes, and seconds in separate sections with automatic navigation and validation — like the native time input, but with full control over the format.
  - [Vue Time Input Component API](/vue/docs/6.x/forms/time-input/api.md): (PRO) Explore the API reference for the Vue Time Input component and discover how to effectively utilize its props for customization.
  - [Vue Time Input Component Styling](/vue/docs/6.x/forms/time-input/styling.md): (PRO) Learn how to customize the Vue Time Input component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Time Picker](/vue/docs/6.x/forms/time-picker.md): (PRO) The Vue Time Picker Component offers a seamless way for users to select time values in any Vue-based application.
  - [Vue Time Picker Component API](/vue/docs/6.x/forms/time-picker/api.md): (PRO) Explore the API reference for the Vue Time Picker component and discover how to effectively utilize its props for customization.
  - [Vue Time Picker Component Styling](/vue/docs/6.x/forms/time-picker/styling.md): (PRO) Learn how to customize the Vue Time Picker component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Layout](/vue/docs/6.x/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
  - [Vue Bootstrap Layout Component](/vue/docs/6.x/forms/layout/bootstrap.md): Learn how to use CoreUI’s Vue Layout component with Bootstrap styles for flexible, framework-consistent UI.
- [Validation](/vue/docs/6.x/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
  - [Vue Form Validation Styling](/vue/docs/6.x/forms/validation/styling.md): Learn how to customize the Vue form validation with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Validation Component](/vue/docs/6.x/forms/validation/bootstrap.md): Learn how to use CoreUI’s Vue Validation component with Bootstrap styles for flexible, framework-consistent UI.

## Components

- [Accordion](/vue/docs/6.x/components/accordion.md): Build vertically collapsing accordions in combination with our Vue Accordion component.
  - [Vue Accordion Component API](/vue/docs/6.x/components/accordion/api.md): Explore the API reference for the Vue Accordion component and discover how to effectively utilize its props for customization.
  - [Vue Accordion Component Styling](/vue/docs/6.x/components/accordion/styling.md): Learn how to customize the Vue Accordion component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Accordion Component Accessibility](/vue/docs/6.x/components/accordion/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Accordion, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Accordion Component](/vue/docs/6.x/components/accordion/bootstrap.md): Learn how to use CoreUI’s Vue Accordion component with Bootstrap styles for flexible, framework-consistent UI.
- [Alert](/vue/docs/6.x/components/alert.md): Vue alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
  - [Vue Alert Component API](/vue/docs/6.x/components/alert/api.md): Explore the API reference for the Vue Alert component and discover how to effectively utilize its props for customization.
  - [Vue Alert Component Styling](/vue/docs/6.x/components/alert/styling.md): Learn how to customize the Vue Alert component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Alert Component](/vue/docs/6.x/components/alert/bootstrap.md): Learn how to use CoreUI’s Vue Alert component with Bootstrap styles for flexible, framework-consistent UI.
- [Avatar](/vue/docs/6.x/components/avatar.md): The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.
  - [Vue Avatar Component API](/vue/docs/6.x/components/avatar/api.md): Explore the API reference for the Vue Avatar component and discover how to effectively utilize its props for customization.
  - [Vue Avatar Component Styling](/vue/docs/6.x/components/avatar/styling.md): Learn how to customize the Vue Avatar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Avatar Component](/vue/docs/6.x/components/avatar/bootstrap.md): Learn how to use CoreUI’s Vue Avatar component with Bootstrap styles for flexible, framework-consistent UI.
- [Badge](/vue/docs/6.x/components/badge.md): Vue badge component is small count and labeling component.
  - [Vue Badge Component API](/vue/docs/6.x/components/badge/api.md): Explore the API reference for the Vue Badge component and discover how to effectively utilize its props for customization.
  - [Vue Badge Component Styling](/vue/docs/6.x/components/badge/styling.md): Learn how to customize the Vue Badge component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Badge Component](/vue/docs/6.x/components/badge/bootstrap.md): Learn how to use CoreUI’s Vue Badge component with Bootstrap styles for flexible, framework-consistent UI.
- [Breadcrumb](/vue/docs/6.x/components/breadcrumb.md): Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
  - [Vue Breadcrumb Component API](/vue/docs/6.x/components/breadcrumb/api.md): Explore the API reference for the Vue Breadcrumb component and discover how to effectively utilize its props for customization.
  - [Vue Breadcrumb Component Styling](/vue/docs/6.x/components/breadcrumb/styling.md): Learn how to customize the Vue Breadcrumb component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Breadcrumb Component Accessibility](/vue/docs/6.x/components/breadcrumb/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Breadcrumb, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Breadcrumb Component](/vue/docs/6.x/components/breadcrumb/bootstrap.md): Learn how to use CoreUI’s Vue Breadcrumb component with Bootstrap styles for flexible, framework-consistent UI.
- [Button](/vue/docs/6.x/components/button.md): Vue button component for actions in tables, forms, cards, and more. CoreUI for Vue.js provides various styles, states, and size. Ready to use and easy to customize.
  - [Vue Buttons Component API](/vue/docs/6.x/components/button/api.md): Explore the API reference for the Vue Buttons component and discover how to effectively utilize its props for customization.
  - [Vue Buttons Component Styling](/vue/docs/6.x/components/button/styling.md): Learn how to customize the Vue Buttons component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Button Component](/vue/docs/6.x/components/button/bootstrap.md): Learn how to use CoreUI’s Vue Buttons component with Bootstrap styles for flexible, framework-consistent UI.
- [Button Group](/vue/docs/6.x/components/button-group.md): Vue button group component allows to group a series of buttons and power them with JavaScript.
  - [Vue Button group Component API](/vue/docs/6.x/components/button-group/api.md): Explore the API reference for the Vue Button group component and discover how to effectively utilize its props for customization.
  - [Vue Bootstrap Button group Component](/vue/docs/6.x/components/button-group/bootstrap.md): Learn how to use CoreUI’s Vue Button group component with Bootstrap styles for flexible, framework-consistent UI.
- [Calendar](/vue/docs/6.x/components/calendar.md): (PRO) The Vue Calendar Component is a versatile, customizable tool for creating responsive calendars in Vue, supporting day, month, and year selection, and global locales.
  - [Vue Calendar Component API](/vue/docs/6.x/components/calendar/api.md): (PRO) Explore the API reference for the Vue Calendar component and discover how to effectively utilize its props for customization.
  - [Vue Calendar Component Styling](/vue/docs/6.x/components/calendar/styling.md): (PRO) Learn how to customize the Vue Calendar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Callout](/vue/docs/6.x/components/callout.md): Vue callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
  - [Vue Callout Component API](/vue/docs/6.x/components/callout/api.md): Explore the API reference for the Vue Callout component and discover how to effectively utilize its props for customization.
  - [Vue Callout Component Styling](/vue/docs/6.x/components/callout/styling.md): Learn how to customize the Vue Callout component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Card](/vue/docs/6.x/components/card.md): Vue card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
  - [Vue Card Component API](/vue/docs/6.x/components/card/api.md): Explore the API reference for the Vue Card component and discover how to effectively utilize its props for customization.
  - [Vue Card Component Styling](/vue/docs/6.x/components/card/styling.md): Learn how to customize the Vue Card component with CSS variables and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Card Component](/vue/docs/6.x/components/card/bootstrap.md): Learn how to use CoreUI’s Vue Card component with Bootstrap styles for flexible, framework-consistent UI.
- [Carousel](/vue/docs/6.x/components/carousel.md): Vue carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
  - [Vue Carousel Component API](/vue/docs/6.x/components/carousel/api.md): Explore the API reference for the Vue Carousel component and discover how to effectively utilize its props for customization.
  - [Vue Carousel Component Styling](/vue/docs/6.x/components/carousel/styling.md): Learn how to customize the Vue Carousel component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Carousel Component](/vue/docs/6.x/components/carousel/bootstrap.md): Learn how to use CoreUI’s Vue Carousel component with Bootstrap styles for flexible, framework-consistent UI.
- [Chart](/vue/docs/6.x/components/chart.md): Vue wrapper for Chart.js 3.0, the most popular charting library.
  - [Vue Chart.js Component API](/vue/docs/6.x/components/chart/api.md): Explore the API reference for the Vue Chart.js component and discover how to effectively utilize its props for customization.
- [Chip](/vue/docs/6.x/components/chip.md): Vue chip component for CoreUI lets you build compact, interactive labels, tags, filters, and selections with icons, avatars, remove buttons, and keyboard support.
  - [Vue Chip Component API](/vue/docs/6.x/components/chip/api.md): Explore the API reference for the Vue Chip component and discover how to effectively utilize its props for customization.
  - [Vue Chip Component Styling](/vue/docs/6.x/components/chip/styling.md): Learn how to customize the Vue Chip component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Chip Component Accessibility](/vue/docs/6.x/components/chip/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Chip, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Chip Component](/vue/docs/6.x/components/chip/bootstrap.md): Learn how to use CoreUI’s Vue Chip component with Bootstrap styles for flexible, framework-consistent UI.
- [Chip Set](/vue/docs/6.x/components/chip-set.md): Vue Chip Set component groups chips into an accessible, keyboard-navigable container with single or multiple selection.
  - [Vue Chip Set Component API](/vue/docs/6.x/components/chip-set/api.md): Explore the API reference for the Vue Chip Set component and discover how to effectively utilize its props for customization.
  - [Vue Chip Set Component Styling](/vue/docs/6.x/components/chip-set/styling.md): Learn how to customize the Vue Chip Set component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Chip Set Component Accessibility](/vue/docs/6.x/components/chip-set/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Chip Set, ensuring compliance with WAI-ARIA guidelines.
- [Close Button](/vue/docs/6.x/components/close-button.md): A generic close button component for dismissing content like modals and alerts.
  - [Vue Close Button Component API](/vue/docs/6.x/components/close-button/api.md): Explore the API reference for the Vue Close Button component and discover how to effectively utilize its props for customization.
  - [Vue Close Button Component Styling](/vue/docs/6.x/components/close-button/styling.md): Learn how to customize the Vue Close Button component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Close Button Component](/vue/docs/6.x/components/close-button/bootstrap.md): Learn how to use CoreUI’s Vue Close Button component with Bootstrap styles for flexible, framework-consistent UI.
- [Collapse](/vue/docs/6.x/components/collapse.md): Vue collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
  - [Vue Collapse Component API](/vue/docs/6.x/components/collapse/api.md): Explore the API reference for the Vue Collapse component and discover how to effectively utilize its props for customization.
  - [Vue Collapse Component Styling](/vue/docs/6.x/components/collapse/styling.md): Learn how to customize the Vue Collapse component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Collapse Component](/vue/docs/6.x/components/collapse/bootstrap.md): Learn how to use CoreUI’s Vue Collapse component with Bootstrap styles for flexible, framework-consistent UI.
- [Dialog](/vue/docs/6.x/components/dialog.md): Vue Dialog component built on the native <dialog> element — top layer rendering, blurred native backdrop, focus trapping, and accessible semantics out of the box.
  - [Vue Dialog Component API](/vue/docs/6.x/components/dialog/api.md): Explore the API reference for the Vue Dialog component and discover how to effectively utilize its props for customization.
  - [Vue Dialog Component Styling](/vue/docs/6.x/components/dialog/styling.md): Learn how to customize the Vue Dialog component with CSS variables and Sass for flexible styling and seamless integration into your design.
- [Drawer](/vue/docs/6.x/components/drawer.md): Vue Drawer component built on the native <dialog> element — a floating side panel with top layer rendering, a native backdrop and accessible semantics out of the box.
  - [Vue Drawer Component API](/vue/docs/6.x/components/drawer/api.md): Explore the API reference for the Vue Drawer component and discover how to effectively utilize its props for customization.
  - [Vue Drawer Component Styling](/vue/docs/6.x/components/drawer/styling.md): Learn how to customize the Vue Drawer component with CSS variables and Sass for flexible styling and seamless integration into your design.
- [Context Menu](/vue/docs/6.x/components/context-menu.md): (PRO) Vue Context Menu opens a menu at the pointer on right-click or the keyboard's Menu key - built on the Menu component with the same items, submenus, keyboard navigation and dismissal.
  - [Vue Context Menu Component API](/vue/docs/6.x/components/context-menu/api.md): (PRO) Explore the API reference for the Vue Context Menu component and discover how to effectively utilize its props for customization.
  - [Vue Context Menu Component Styling](/vue/docs/6.x/components/context-menu/styling.md): (PRO) Learn how to customize the Vue Context Menu component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Dropdown](/vue/docs/6.x/components/dropdown.md): Vue dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
  - [Vue Dropdown Component API](/vue/docs/6.x/components/dropdown/api.md): Explore the API reference for the Vue Dropdown component and discover how to effectively utilize its props for customization.
  - [Vue Dropdown Component Styling](/vue/docs/6.x/components/dropdown/styling.md): Learn how to customize the Vue Dropdown component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Dropdown Component](/vue/docs/6.x/components/dropdown/bootstrap.md): Learn how to use CoreUI’s Vue Dropdown component with Bootstrap styles for flexible, framework-consistent UI.
- [Focus Trap](/vue/docs/6.x/components/focus-trap.md): Vue Focus Trap component ensures keyboard navigation stays within a designated container element. Essential for creating accessible modal dialogs, dropdown menus, and overlay components that comply with WCAG 2.1 accessibility standards.
  - [Vue Focus Trap Component API](/vue/docs/6.x/components/focus-trap/api.md): Explore the API reference for the Vue Focus Trap component and discover how to effectively utilize its props for customization.
  - [Vue Focus Trap Accessibility](/vue/docs/6.x/components/focus-trap/accessibility.md): Learn how to implement WCAG 2.1 compliant focus management with the Vue Focus Trap component for better accessibility.
- [Footer](/vue/docs/6.x/components/footer.md): Vue footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
- [Header](/vue/docs/6.x/components/header.md): Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
  - [Vue Header Component API](/vue/docs/6.x/components/header/api.md): Explore the API reference for the Vue Header component and discover how to effectively utilize its props for customization.
  - [Vue Header Component Styling](/vue/docs/6.x/components/header/styling.md): Learn how to customize the Vue Header component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Icon](/vue/docs/6.x/components/icon.md): Vue icons library is a great resource for Vue developers, who can use its customizable SVG icons in their applications. It offers an extensive library of icons to choose from, which can be easily inserted into projects with just a few lines of code. Not only that, but users are also able to customize the appearance of these icons by setting various props on them. This provides developers with an efficient and flexible way to integrate useful graphical elements into their web pages without doing any extra work.
  - [Vue Icon Component API](/vue/docs/6.x/components/icon/api.md): Explore the API reference for the Vue Icon component and discover how to effectively utilize its props for customization.
- [Image](/vue/docs/6.x/components/image.md): Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.
  - [Vue Image Component API](/vue/docs/6.x/components/image/api.md): Explore the API reference for the Vue Image component and discover how to effectively utilize its props for customization.
  - [Vue Bootstrap Image Component](/vue/docs/6.x/components/image/bootstrap.md): Learn how to use CoreUI’s Vue Image component with Bootstrap styles for flexible, framework-consistent UI.
- [List Box](/vue/docs/6.x/components/list-box.md): A keyboard-driven list of values built on the ARIA listbox pattern: single, multiple or no selection, sections, descriptions, links, an empty state and an aria-activedescendant mode that keeps the focus in your own input.
  - [Vue List Box Component API](/vue/docs/6.x/components/list-box/api.md): Explore the API reference for the Vue List Box component and discover how to effectively utilize its props for customization.
- [List Group](/vue/docs/6.x/components/list-group.md): Vue List Group component allows displaying a series of content. Learn how to use Vue list group to build complex list structure on your website.
  - [Vue List group Component API](/vue/docs/6.x/components/list-group/api.md): Explore the API reference for the Vue List group component and discover how to effectively utilize its props for customization.
  - [Vue List group Component Styling](/vue/docs/6.x/components/list-group/styling.md): Learn how to customize the Vue List group component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap List group Component](/vue/docs/6.x/components/list-group/bootstrap.md): Learn how to use CoreUI’s Vue List group component with Bootstrap styles for flexible, framework-consistent UI.
- [Loading Button](/vue/docs/6.x/components/loading-button.md): (PRO) Vue loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.
  - [Vue Loading Button Component API](/vue/docs/6.x/components/loading-button/api.md): (PRO) Explore the API reference for the Vue Loading Button component and discover how to effectively utilize its props for customization.
- [Menu](/vue/docs/6.x/components/menu.md): Contextual overlays for lists, links and actions: one panel component with submenus, responsive placement and viewport-aware flipping.
  - [Vue Menu Component API](/vue/docs/6.x/components/menu/api.md): Explore the API reference for the Vue Menu component and discover how to effectively utilize its props for customization.
  - [Vue Menu Component Styling](/vue/docs/6.x/components/menu/styling.md): Learn how to customize the Vue Menu component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
- [Modal](/vue/docs/6.x/components/modal.md): Vue Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI Vue modal components easily. Multiple examples and tutorial.
  - [Vue Modal Component API](/vue/docs/6.x/components/modal/api.md): Explore the API reference for the Vue Modal component and discover how to effectively utilize its props for customization.
  - [Vue Modal Component Styling](/vue/docs/6.x/components/modal/styling.md): Learn how to customize the Vue Modal component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Modal Component](/vue/docs/6.x/components/modal/bootstrap.md): Learn how to use CoreUI’s Vue Modal component with Bootstrap styles for flexible, framework-consistent UI.
- [Nav](/vue/docs/6.x/components/navs-tabs.md): Documentation and examples for how to use CoreUI's included Vue navigation components.
  - [Vue Navs & Tabs Component API](/vue/docs/6.x/components/navs-tabs/api.md): Explore the API reference for the Vue Navs & Tabs component and discover how to effectively utilize its props for customization.
  - [Vue Navs & Tabs Component Styling](/vue/docs/6.x/components/navs-tabs/styling.md): Learn how to customize the Vue Navs & Tabs component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Nav Component](/vue/docs/6.x/components/navs-tabs/bootstrap.md): Learn how to use CoreUI’s Vue Navs & Tabs component with Bootstrap styles for flexible, framework-consistent UI.
- [Navbar](/vue/docs/6.x/components/navbar.md): Documentation and examples for the Vue navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
  - [Vue Navbar Component API](/vue/docs/6.x/components/navbar/api.md): Explore the API reference for the Vue Navbar component and discover how to effectively utilize its props for customization.
  - [Vue Navbar Component Styling](/vue/docs/6.x/components/navbar/styling.md): Learn how to customize the Vue Navbar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Navbar Component](/vue/docs/6.x/components/navbar/bootstrap.md): Learn how to use CoreUI’s Vue Navbar component with Bootstrap styles for flexible, framework-consistent UI.
- [Offcanvas](/vue/docs/6.x/components/offcanvas.md): Vue alert component allows build hidden sidebars into your project for navigation, shopping carts.
  - [Vue Offcanvas Component API](/vue/docs/6.x/components/offcanvas/api.md): Explore the API reference for the Vue Offcanvas component and discover how to effectively utilize its props for customization.
  - [Vue Offcanvas Component Styling](/vue/docs/6.x/components/offcanvas/styling.md): Learn how to customize the Vue Offcanvas component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Offcanvas Component Accessibility](/vue/docs/6.x/components/offcanvas/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Offcanvas, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Offcanvas Component](/vue/docs/6.x/components/offcanvas/bootstrap.md): Learn how to use CoreUI’s Vue Offcanvas component with Bootstrap styles for flexible, framework-consistent UI.
- [Pagination](/vue/docs/6.x/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
  - [Vue Pagination Component API](/vue/docs/6.x/components/pagination/api.md): Explore the API reference for the Vue Pagination component and discover how to effectively utilize its props for customization.
  - [Vue Pagination Component Styling](/vue/docs/6.x/components/pagination/styling.md): Learn how to customize the Vue Pagination component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Pagination Component](/vue/docs/6.x/components/pagination/bootstrap.md): Learn how to use CoreUI’s Vue Pagination component with Bootstrap styles for flexible, framework-consistent UI.
- [Placeholder](/vue/docs/6.x/components/placeholder.md): Use loading Vue placeholders for your components or pages to indicate something may still be loading.
  - [Vue Placeholder Component API](/vue/docs/6.x/components/placeholder/api.md): Explore the API reference for the Vue Placeholder component and discover how to effectively utilize its props for customization.
  - [Vue Placeholder Component Styling](/vue/docs/6.x/components/placeholder/styling.md): Learn how to customize the Vue Placeholder component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Placeholder Component](/vue/docs/6.x/components/placeholder/bootstrap.md): Learn how to use CoreUI’s Vue Placeholder component with Bootstrap styles for flexible, framework-consistent UI.
- [Popover](/vue/docs/6.x/components/popover.md): Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.
  - [Vue Popover Component API](/vue/docs/6.x/components/popover/api.md): Explore the API reference for the Vue Popover component and discover how to effectively utilize its props for customization.
  - [Vue Popover Component Styling](/vue/docs/6.x/components/popover/styling.md): Learn how to customize the Vue Popover component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Popover Component](/vue/docs/6.x/components/popover/bootstrap.md): Learn how to use CoreUI’s Vue Popover component with Bootstrap styles for flexible, framework-consistent UI.
- [Progress](/vue/docs/6.x/components/progress.md): Documentation and examples for using Vue progress bars featuring support for stacked bars, animated backgrounds, and text labels.
  - [Vue Progress Component API](/vue/docs/6.x/components/progress/api.md): Explore the API reference for the Vue Progress component and discover how to effectively utilize its props for customization.
  - [Vue Progress Component Styling](/vue/docs/6.x/components/progress/styling.md): Learn how to customize the Vue Progress component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Progress Component](/vue/docs/6.x/components/progress/bootstrap.md): Learn how to use CoreUI’s Vue Progress component with Bootstrap styles for flexible, framework-consistent UI.
- [Scrollspy](/vue/docs/6.x/components/scrollspy.md): Automatically update the navigation based on scroll position to indicate which section is currently active in the viewport.
  - [Vue Scrollspy Component API](/vue/docs/6.x/components/scrollspy/api.md): Explore the API reference for the Vue Scrollspy component and discover how to effectively utilize its props for customization.
  - [Vue Bootstrap Scrollspy Component](/vue/docs/6.x/components/scrollspy/bootstrap.md): Learn how to highlight the section currently in view using CoreUI's Vue Scrollspy component styled to match Bootstrap navigation.
- [Search Button](/vue/docs/6.x/components/search-button.md): Vue search button component for keyboard-aware search entry points, command palettes, modals, and offcanvas panels.
  - [Vue Search Button Component API](/vue/docs/6.x/components/search-button/api.md): Explore the API reference for the Vue Search Button component and discover how to effectively utilize its props for customization.
  - [Vue Search Button Component Styling](/vue/docs/6.x/components/search-button/styling.md): Learn how to customize the Vue Search Button component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Search Button Component Accessibility](/vue/docs/6.x/components/search-button/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Search Button, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Search Button Component](/vue/docs/6.x/components/search-button/bootstrap.md): Learn how to use CoreUI’s Vue Search Button component with Bootstrap styles for flexible, framework-consistent UI.
- [Sidebar](/vue/docs/6.x/components/sidebar.md): Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
  - [Vue Sidebar Component API](/vue/docs/6.x/components/sidebar/api.md): Explore the API reference for the Vue Sidebar component and discover how to effectively utilize its props for customization.
  - [Vue Sidebar Component Styling](/vue/docs/6.x/components/sidebar/styling.md): Learn how to customize the Vue Sidebar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Sidebar Component](/vue/docs/6.x/components/sidebar/bootstrap.md): Learn how to use CoreUI’s Vue Sidebar component with Bootstrap styles for flexible, framework-consistent UI.
- [Smart Pagination](/vue/docs/6.x/components/smart-pagination.md): (PRO) Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.
  - [Vue Smart Pagination Component API](/vue/docs/6.x/components/smart-pagination/api.md): (PRO) Explore the API reference for the Vue Smart Pagination component and discover how to effectively utilize its props for customization.
- [Smart Table](/vue/docs/6.x/components/smart-table.md): (PRO) A Vue Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. Vue Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more.
  - [Vue Smart Table (DataTable) Component API](/vue/docs/6.x/components/smart-table/api.md): (PRO) Explore the API reference for the Vue Smart Table (DataTable) component and discover how to effectively utilize its props for customization.
- [Spinner](/vue/docs/6.x/components/spinner.md): Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
  - [Vue Spinner Component API](/vue/docs/6.x/components/spinner/api.md): Explore the API reference for the Vue Spinner component and discover how to effectively utilize its props for customization.
  - [Vue Spinner Component Styling](/vue/docs/6.x/components/spinner/styling.md): Learn how to customize the Vue Spinner component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Spinner Component](/vue/docs/6.x/components/spinner/bootstrap.md): Learn how to use CoreUI’s Vue Spinner component with Bootstrap styles for flexible, framework-consistent UI.
- [Tab](/vue/docs/6.x/components/tabs.md): The CoreUI Vue Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements.
  - [Vue Tabs Component API](/vue/docs/6.x/components/tabs/api.md): Explore the API reference for the Vue Tabs component and discover how to effectively utilize its props for customization.
  - [Vue Tabs Component Styling](/vue/docs/6.x/components/tabs/styling.md): Learn how to customize the Vue Tabs component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Tabs Component Accessibility](/vue/docs/6.x/components/tabs/accessibility.md): Detailed overview of the accessibility features implemented in CoreUI Vue Tabs, ensuring compliance with WAI-ARIA guidelines.
  - [Vue Bootstrap Tab Component](/vue/docs/6.x/components/tabs/bootstrap.md): Learn how to use CoreUI’s Vue Tabs component with Bootstrap styles for flexible, framework-consistent UI.
- [Table](/vue/docs/6.x/components/table.md): Documentation and examples for opt-in styling of tables.
  - [Vue Table Component API](/vue/docs/6.x/components/table/api.md): Explore the API reference for the Vue Table component and discover how to effectively utilize its props for customization.
  - [Vue Table Component Styling](/vue/docs/6.x/components/table/styling.md): Learn how to customize the Vue Table component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Table Component](/vue/docs/6.x/components/table/bootstrap.md): Learn how to use CoreUI’s Vue Table component with Bootstrap styles for flexible, framework-consistent UI.
- [Toast](/vue/docs/6.x/components/toast.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
  - [Vue Toast Component API](/vue/docs/6.x/components/toast/api.md): Explore the API reference for the Vue Toast component and discover how to effectively utilize its props for customization.
  - [Vue Toast Component Styling](/vue/docs/6.x/components/toast/styling.md): Learn how to customize the Vue Toast component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Toast Component](/vue/docs/6.x/components/toast/bootstrap.md): Learn how to use CoreUI’s Vue Toast component with Bootstrap styles for flexible, framework-consistent UI.
- [Toaster](/vue/docs/6.x/components/toaster.md): Create toast notifications from anywhere in a Vue app with the CoreUI Toaster: a store keyed by id with add, update, close and promise, a placed container, a visible-toasts limit and screen-reader priority.
  - [Vue Toaster Component API](/vue/docs/6.x/components/toaster/api.md): Explore the API reference for the Vue Toaster component and discover how to effectively utilize its props for customization.
  - [Vue Bootstrap Toaster Component](/vue/docs/6.x/components/toaster/bootstrap.md): Learn how to use CoreUI’s Vue Toaster component with Bootstrap styles for flexible, framework-consistent UI.
- [Tooltip](/vue/docs/6.x/components/tooltip.md): Documentation and examples for adding Vue Tooltips.
  - [Vue Tooltip Component API](/vue/docs/6.x/components/tooltip/api.md): Explore the API reference for the Vue Tooltip component and discover how to effectively utilize its props for customization.
  - [Vue Tooltip Component Styling](/vue/docs/6.x/components/tooltip/styling.md): Learn how to customize the Vue Tooltip component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
  - [Vue Bootstrap Tooltip Component](/vue/docs/6.x/components/tooltip/bootstrap.md): Learn how to use CoreUI’s Vue Tooltip component with Bootstrap styles for flexible, framework-consistent UI.
- [Transfer](/vue/docs/6.x/components/transfer.md): Two lists side by side and four buttons that move options between them — the selection or everything at once: a select-all header with a counter, an optional per-list search, a one-way mode and an announcement of every move.
  - [Vue Transfer Component API](/vue/docs/6.x/components/transfer/api.md): Explore the API reference for the Vue Transfer component and discover how to effectively utilize its props for customization.
- [Virtual Scroller](/vue/docs/6.x/components/virtual-scroller.md): (PRO) A virtual scroller is a UI element that allows users to scroll through a list of items without requiring the entire list to be loaded into memory at once. This can be particularly useful for lists that are very large or that contain a lot of data, as it allows the user to view and interact with a subset of the list while the rest of the data is loaded in the background.
  - [Vue Virtual Scroller Component API](/vue/docs/6.x/components/virtual-scroller/api.md): (PRO) Explore the API reference for the Vue Virtual Scroller component and discover how to effectively utilize its props for customization.

## Data Grid

- [Data Grid](https://coreui.io/data-grid/vue/docs/)

## Scheduler

- [Scheduler](https://coreui.io/scheduler/vue/docs/)

## Helpers

- [Backdrop](/vue/docs/6.x/helpers/backdrop.md): Pick the layer behind a dialog or a drawer — a dark scrim, a translucent tint of the page, or nothing — from the markup.
- [Clearfix](/vue/docs/6.x/helpers/clearfix.md): Quickly and easily clear floated content within a container by adding a clearfix utility.
- [Color & background](/vue/docs/6.x/helpers/color-background.md): Set a background color with contrasting foreground color.
- [Focus ring](/vue/docs/6.x/helpers/focus-ring.md): Utility classes that allows you to add and modify custom focus ring styles to elements and components.
- [Hover lift](/vue/docs/6.x/helpers/hover-lift.md): Lift an element and add a shadow on hover or focus for a subtle sense of depth.
- [Icon link](/vue/docs/6.x/helpers/icon-link.md): Quickly create stylized hyperlinks with CoreUI Icons or other icons.
- [Position](/vue/docs/6.x/helpers/position.md): Use these helpers for quickly configuring the position of an element.
- [Stacks](/vue/docs/6.x/helpers/stacks.md): Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
- [Stretched link](/vue/docs/6.x/helpers/stretched-link.md): Make any HTML element or CoreUI for Vue component clickable by "stretching" a nested link via CSS.
- [Text truncation](/vue/docs/6.x/helpers/text-truncation.md): Truncate long strings of text with an ellipsis.
- [Vertical rule](/vue/docs/6.x/helpers/vertical-rule.md): Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
- [Visually hidden](/vue/docs/6.x/helpers/visually-hidden.md): Use these helpers to visually hide elements but keep them accessible to assistive technologies.

## Utilities

- [API](/vue/docs/6.x/utilities/api.md): The utility API is a Sass-based tool to generate utility classes.
- [Aspect ratio](/vue/docs/6.x/utilities/aspect-ratio.md): Make an element hold an aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
- [Align content](/vue/docs/6.x/utilities/align-content.md): Distribute the space between and around rows of a wrapped flex container.
- [Align items](/vue/docs/6.x/utilities/align-items.md): Align items along the cross axis, in both flexbox and grid containers.
- [Align self](/vue/docs/6.x/utilities/align-self.md): Override the container’s cross-axis alignment for a single item.
- [Background](/vue/docs/6.x/utilities/background.md): Convey meaning through `background-color` and add decoration with gradients.
- [Border](/vue/docs/6.x/utilities/border.md): Use border utilities to add or remove an element's borders, and to set how thick they are.
- [Border color](/vue/docs/6.x/utilities/border-color.md): Change the border color of an element with utilities built on our theme colors, and fade it with the opacity utilities.
- [Border radius](/vue/docs/6.x/utilities/border-radius.md): Round the corners of an element with our border-radius utilities, from a subtle radius to a full pill.
- [Color scheme](/vue/docs/6.x/utilities/color-scheme.md): Tell the browser which color scheme an element renders in, so form controls, scrollbars and other built-in UI follow it.
- [Colors](/vue/docs/6.x/utilities/colors.md): Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too.
- [Container queries](/vue/docs/6.x/utilities/container-queries.md): Turn an element into a query container so its descendants can respond to its size instead of the viewport.
- [Display property](/vue/docs/6.x/utilities/display.md): Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
- [Divide](/vue/docs/6.x/utilities/divide.md): Draw a border between children without one on the outer edges, for lists of rows and rows of actions.
- [Flex](/vue/docs/6.x/utilities/flex.md): Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
- [Float](/vue/docs/6.x/utilities/float.md): Toggle floats on any element, across any breakpoint, using our responsive float utilities.
- [Font family](/vue/docs/6.x/utilities/font-family.md): Switch a selection to our monospace font stack.
- [Font size](/vue/docs/6.x/utilities/font-size.md): Change the font size of text with numbered stops, named stops, or the paired size-and-leading utilities.
- [Font style](/vue/docs/6.x/utilities/font-style.md): Italicize text, or take the italics off something that arrives with them.
- [Font weight](/vue/docs/6.x/utilities/font-weight.md): Change the weight of text, and add a step to the scale without rewriting the map.
- [Gap](/vue/docs/6.x/utilities/gap.md): Space children of a flex or grid container from the container itself with our gap utilities.
- [Grid](/vue/docs/6.x/utilities/grid.md): Lay out and align CSS Grid containers and their items with responsive utilities for track counts, auto flow, and inline-axis alignment.
- [Height](/vue/docs/6.x/utilities/height.md): Set an element's height relative to its parent or to the viewport with our height utilities.
- [Justify content](/vue/docs/6.x/utilities/justify-content.md): Align flex items along the main axis of a flex container.
- [Justify items](/vue/docs/6.x/utilities/justify-items.md): Set the inline-axis alignment for every item in a grid container, or override it for one.
- [Line height](/vue/docs/6.x/utilities/line-height.md): Change the line height of text with our line-height utilities.
- [Link](/vue/docs/6.x/utilities/link.md): Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
- [Margin](/vue/docs/6.x/utilities/margin.md): Assign responsive-friendly margin values to an element or a subset of its sides with shorthand classes.
- [Motion](/vue/docs/6.x/utilities/motion.md): Remove the transition from a single element with motion utilities.
- [Object fit](/vue/docs/6.x/utilities/object-fit.md): Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
- [Opacity](/vue/docs/6.x/utilities/opacity.md): Control the opacity of elements.
- [Overflow](/vue/docs/6.x/utilities/overflow.md): Use these shorthand utilities for quickly configuring how content overflows an element.
- [Padding](/vue/docs/6.x/utilities/padding.md): Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.
- [Place items](/vue/docs/6.x/utilities/place-items.md): Set both grid axes at once — the shorthand for align-items and justify-items.
- [Pointer events](/vue/docs/6.x/utilities/pointer-events.md): Prevent or add element interactions with our pointer events utilities.
- [Position](/vue/docs/6.x/utilities/position.md): Use these shorthand utilities for quickly configuring the position of an element.
- [Shadows](/vue/docs/6.x/utilities/shadows.md): Add or remove shadows to elements with box-shadow utilities.
- [Space between](/vue/docs/6.x/utilities/space.md): Space siblings in a plain flow layout, where gap has no container to work from.
- [Text alignment](/vue/docs/6.x/utilities/text-alignment.md): Realign text with our responsive text alignment utilities.
- [Text decoration](/vue/docs/6.x/utilities/text-decoration.md): Underline, strike through, or remove the decoration from text.
- [Text transform](/vue/docs/6.x/utilities/text-transform.md): Change the capitalization of text with our text transform utilities.
- [Text wrapping](/vue/docs/6.x/utilities/text-wrapping.md): Control how text wraps, overflows, and breaks inside its container.
- [Theme](/vue/docs/6.x/utilities/theme.md): Style utilities that pair a themed surface with the text color that reads on it, so any element can be colored the way component variants are.
- [User select](/vue/docs/6.x/utilities/user-select.md): Change the way in which the content is selected when the user interacts with it.
- [Vertical alignment](/vue/docs/6.x/utilities/vertical-align.md): Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- [Visibility](/vue/docs/6.x/utilities/visibility.md): Control the visibility of elements, without modifying their display, with visibility utilities.
- [Width](/vue/docs/6.x/utilities/width.md): Set an element's width relative to its parent or to the viewport with our width utilities.
- [Z-index](/vue/docs/6.x/utilities/z-index.md): Use our low-level `z-index` utilities to quickly change the stack level of an element or component.

## Blocks

- [Widgets](/vue/docs/6.x/blocks/widgets.md): Ready-made dashboard statistic blocks built from a Vue card and utilities — copy the markup, keep it, change it.

## Templates

- [Admin & Dashboard](/vue/docs/6.x/templates/admin-dashboard.md): Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize Vue admin panels to cover any requirement.
- [Download](/vue/docs/6.x/templates/download.md): Download CoreUI Vue Admin Templates to get the source code that lets you customize and create your Vue-based application.
- [Installation](/vue/docs/6.x/templates/installation.md): Learn how to use CoreUI Vue Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.
- [Customize](/vue/docs/6.x/templates/customize.md): Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.
- [Contents](/vue/docs/6.x/templates/contents.md): Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/vue/docs/6.x/migration/v4.md): Track and review changes to the CoreUI for Vue.js components to help you migrate from v3 to v4.
- [v5](/vue/docs/6.x/migration/v5.md): Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.
- [v6](/vue/docs/6.x/migration/v6.md): Track and review changes to the CoreUI for Vue.js components to help you migrate from v5 to v6.