FreeComponent · Tabs
Underline Tabs
Accessible Vue 3 tabs with underline and pills variants, a sliding indicator, roving tabindex and arrow-key navigation. Tailwind CSS, v-model.
by Vueplay
Vue tabs components
Tabs switch between related views without leaving the page. These Vue 3 tabs components come in underline, pill and segmented styles, with the active tab bound through v-model so the parent stays in control.
They use <script setup lang="ts">, Tailwind CSS 4 and class-based dark mode, and have no dependencies besides vue. Install with npm, copy the source, or adjust them in the Vueplay Studio.
FreeGood to know
Building tabs that hold up
- Follow the tabs ARIA pattern
- Use role="tablist", role="tab" and role="tabpanel" with aria-selected and aria-controls. Only the active tab should be in the tab order, with arrow keys moving between tabs.
- Expose the active tab with v-model
- Use defineModel() for the active key so a parent can sync it to the URL query or persist it. That keeps deep links to a specific tab working.
- Choose between v-if and v-show
- Use v-show when panels are cheap and switching should be instant, and v-if or KeepAlive when panels are heavy or fetch data. Mixing both is fine per panel.
- Handle overflow on small screens
- A row of tabs can overflow on phones. Let the tablist scroll horizontally with overflow-x-auto, or switch to a select element below a breakpoint.
FAQ
Questions
Should I use tabs or an accordion?
Use tabs when people compare or switch between a few parallel views, and an accordion when content is long, sequential or read on small screens.
How do I install a tabs component?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.