# CoreUI Vue.js documentation

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

## Getting started

- [Introduction](/vue/docs/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.
- [Accessibility](/vue/docs/getting-started/accessibility.md): A brief overview of CoreUI for Vue features and limitations for the creation of accessible content.

## AI Tools

- [LLMs.txt](/vue/docs/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/ai-tools/mcp.md): Bring the CoreUI for Vue documentation into your AI coding assistant with the @coreui/docs-mcp Model Context Protocol server.

## Customize

- [Sass](/vue/docs/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/customize/options.md): Quickly customize CoreUI for Vue with built-in variables to easily toggle global CSS preferences for controlling style and behavior.
- [CSS Variables](/vue/docs/customize/css-variables.md): Use CoreUI's CSS custom properties for fast and forward-looking design and development.

## Layout

- [Breakpoints](/vue/docs/layout/breakpoints.md): Breakpoints are the triggers in CoreUI for Vue.js for how your layout responsive changes across device or viewport sizes.
- [Columns](/vue/docs/layout/columns.md): Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.
- [Containers](/vue/docs/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.
- [Grid](/vue/docs/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.
- [Gutters](/vue/docs/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.

## Forms

- [Autocomplete](/vue/docs/forms/autocomplete.md): Build powerful Vue Autocomplete components with dynamic search, dropdown suggestions, and external data integration. The ultimate Vue.js Autocomplete solution for modern web applications.
- [Checkbox](/vue/docs/forms/checkbox.md): Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.
- [Chip Input](/vue/docs/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.
- [Date Picker](/vue/docs/forms/date-picker.md): The Vue Date Picker Component is an essential tool for any Vue-based application that requires date selection functionality.
- [Date Range Picker](/vue/docs/forms/date-range-picker.md): The Vue Date Range Picker component by CoreUI is a versatile tool for selecting date ranges. It is designed for compatibility across various browsers and devices, making it a reliable choice for diverse applications.
- [Floating labels](/vue/docs/forms/floating-labels.md): Vue floating label component. Create beautifully simple form labels that float over your input fields.
- [Input](/vue/docs/forms/input.md): Vue input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
- [Input group](/vue/docs/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.
- [Multi Select](/vue/docs/forms/multi-select.md): Customize the native <select>s with a powerful Vue Multi Select component that changes the element’s initial appearance and brings some new functionalities.
- [OTP Input](/vue/docs/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.
- [Password Input](/vue/docs/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.
- [Radio](/vue/docs/forms/radio.md): Create consistent cross-browser and cross-device checkboxes and radios with our Vue checkbox, radio, and switch components.
- [Range](/vue/docs/forms/range.md): Vue range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
- [Range Slider](/vue/docs/forms/range-slider.md): Enhance your forms with our customizable Vue Range Slider component for advanced range selection.
- [Rating](/vue/docs/forms/rating.md): 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.
- [Select](/vue/docs/forms/select.md): Vue select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
- [Stepper](/vue/docs/forms/stepper.md): 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.
- [Switch](/vue/docs/forms/switch.md): Create consistent cross-browser and cross-device switch component.
- [Textarea](/vue/docs/forms/textarea.md): Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
- [Time Picker](/vue/docs/forms/time-picker.md): Vue Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.
- [Layout](/vue/docs/forms/layout.md): Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
- [Validation](/vue/docs/forms/validation.md): Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

## Components

- [Accordion](/vue/docs/components/accordion.md): Build vertically collapsing accordions in combination with our Vue Collapse component.
- [Alert](/vue/docs/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.
- [Avatar](/vue/docs/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.
- [Badge](/vue/docs/components/badge.md): Vue badge component is small count and labeling component.
- [Breadcrumb](/vue/docs/components/breadcrumb.md): Vue breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
- [Buttons](/vue/docs/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.
- [Button Group](/vue/docs/components/button-group.md): Vue button group component allows to group a series of buttons and power them with JavaScript.
- [Calendar](/vue/docs/components/calendar.md): The Vue Calendar Component is a versatile, customizable tool for creating responsive calendars in Vue, supporting day, month, and year selection, and global locales.
- [Callout](/vue/docs/components/callout.md): Vue callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
- [Card](/vue/docs/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.
- [Carousel](/vue/docs/components/carousel.md): Vue carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
- [Chart](/vue/docs/components/chart.md): Vue wrapper for Chart.js 3.0, the most popular charting library.
- [Chip](/vue/docs/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.
- [Chip Set](/vue/docs/components/chip-set.md): Vue Chip Set component groups chips into an accessible, keyboard-navigable container with single or multiple selection.
- [Close Button](/vue/docs/components/close-button.md): A generic close button component for dismissing content like modals and alerts.
- [Collapse](/vue/docs/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.
- [Dropdown](/vue/docs/components/dropdown.md): Vue dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
- [Focus Trap](/vue/docs/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.
- [Footer](/vue/docs/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/components/header.md): Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
- [Icon](/vue/docs/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.
- [Image](/vue/docs/components/image.md): Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.
- [List Group](/vue/docs/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.
- [Loading Button](/vue/docs/components/loading-button.md): 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.
- [Modal](/vue/docs/components/modal.md): Vue Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize Vue CoreUI Modals easily. Multiple examples and tutorial.
- [Navs & Tabs](/vue/docs/components/navs-tabs.md): Documentation and examples for how to use CoreUI's included Vue navigation components.
- [Navbar](/vue/docs/components/navbar.md): Documentation and examples for the Vue navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
- [Offcanvas](/vue/docs/components/offcanvas.md): Vue alert component allows build hidden sidebars into your project for navigation, shopping carts.
- [Pagination](/vue/docs/components/pagination.md): Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
- [Placeholder](/vue/docs/components/placeholder.md): Use loading vue placeholders for your components or pages to indicate something may still be loading.
- [Popover](/vue/docs/components/popover.md): Documentation and examples for adding Vue popovers, like those found in iOS, to any element on your site.
- [Progress](/vue/docs/components/progress.md): Documentation and examples for using Vue progress bars featuring support for stacked bars, animated backgrounds, and text labels.
- [Search Button](/vue/docs/components/search-button.md): Vue search button component for keyboard-aware search entry points, command palettes, modals, and offcanvas panels.
- [Sidebar](/vue/docs/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.
- [Smart Pagination](/vue/docs/components/smart-pagination.md): Documentation and examples for showing smart pagination to indicate a series of related content exists across multiple pages.
- [Smart Table](/vue/docs/components/smart-table.md): 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.
- [Spinner](/vue/docs/components/spinner.md): Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
- [Table](/vue/docs/components/table.md): Documentation and examples for opt-in styling of tables.
- [Tabs](/vue/docs/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.
- [Toast](/vue/docs/components/toast.md): Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
- [Tooltip](/vue/docs/components/tooltip.md): Documentation and examples for adding Vue Tooltips.
- [Virtual Scroller](/vue/docs/components/virtual-scroller.md): 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.
- [Widgets](/vue/docs/components/widgets.md)

## Templates

- [Admin & Dashboard](/vue/docs/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/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/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/templates/customize.md): Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.
- [Contents](/vue/docs/templates/contents.md): Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.

## Migration

- [v4](/vue/docs/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/migration/v5.md): Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.