# Tabs Vertical With Preview — React Tabs Component

> Vertical feature tabs that auto-advance with a filling rail and swap a drawn product preview, sliding up or down by direction.

- Category: [Tabs](https://pixelpapa.com/components/tabs.md)
- Tags: tabs, vertical, preview, autoplay, features
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/tabs/tabs-vertical-with-preview

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/tabs-vertical-with-preview
```

The file is written to `components/pixelpapa/tabs-vertical-with-preview.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/tabs/tabs-vertical-with-preview.

## AI prompt

```text
Add the "Tabs Vertical With Preview" component from PixelPapa UI to this project.

What it is: Vertical feature tabs that auto-advance with a filling rail and swap a drawn product preview, sliding up or down by direction.
Category: Tabs. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/tabs-vertical-with-preview
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/tabs-vertical-with-preview.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/tabs-vertical-with-preview.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/tabs-vertical-with-preview" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More tabs

- [Tabs Animated Height Content](https://pixelpapa.com/components/tabs/tabs-animated-height-content.md): Tabs inside a card that springs to the height of each panel, so short and long content swap without a layout jump.
- [Tabs Folder](https://pixelpapa.com/components/tabs/tabs-folder.md): Browser-style tabs with scooped corners: the active shape slides between tabs, and tabs can be closed or added with layout springs.
- [Tabs Scrollable Overflow](https://pixelpapa.com/components/tabs/tabs-scrollable-overflow.md) (Pro): A tab strip that scrolls when it runs out of room: edge fades and arrow buttons appear only on the side that has more, and the active tab centres itself.
- [Tabs Segmented Icons](https://pixelpapa.com/components/tabs/tabs-segmented-icons.md): An icon segmented control whose active segment unfolds its label, driving a task view where the same cards re-flow between list, board, grid and timeline.
- [Tabs Sliding Pill](https://pixelpapa.com/components/tabs/tabs-sliding-pill.md) (Pro): A pill glides between tabs on a shared-layout spring while the panel slides in from the side you moved toward.
- [Tabs Underline Spring](https://pixelpapa.com/components/tabs/tabs-underline-spring.md) (Pro): An underline that stretches toward the next tab before its tail catches up, with a hover highlight that follows the pointer.