Tabs Samples

Does not even need an introduction.

Vertical/Horizontal

Tabs — Basic (Controlled)

Uses value, onValueChange, disabled, and accessible panels.

AP Sample

Front End • TS • Next.js • Shadcn. Hover on other tabs to explore content.

Current Tab: overview

Tabs — Vertical (Manual)

Uses orientation="vertical" and activationMode="manual".

KPI Summary

High-level overview of performance metrics for the past 30 days.

Impressions

2283

Reach

7277

CTR

2833

Saves

3955

Likes

1649

Comments

9619

Tabs — Scrollable/Wrapping

Long trigger lists with overflow-x-auto or wrapping.

You're viewing Tab 1. Try scrolling the tab list.

Active: tab-1

Loading…