Skip to content
SevenUI
Sign in

Tabs components

14 free, copy-and-go React Tabs examples built on the SevenUI Tabs primitive. Install any of them with the shadcn CLI.

Read the docsBrowse Pro blocksShare on X (opens in a new tab)
On this page

Support channel tabs

A contact support card whose Chat, Email and Phone icon tabs show each channel's availability, reply time and next action.

… add @sevenui/component/tabs-01

Contact support

Pick the channel that fits how urgent this is.

3 agents online

Typical reply in 2 minutes

Best for quick questions about your account, billing, or a setting you can't find.

Project view switcher

A compact segmented control in a project header that switches the same tasks between board, list and timeline views.

… add @sevenui/component/tabs-02

Website relaunch

5 tasks · ships Oct 10

To do3

Set up redirects from old URLsSam · Sep 30
QA the signup flow on SafariMaya · Oct 2
Launch announcement emailLeo · Oct 8

In progress1

Write pricing page copyMaya · Sep 26

Done1

Export hero illustrationsLeo · Sep 24

Recipe card tabs

A recipe card with Ingredients, Method and Nutrition tabs and a servings stepper that rescales every ingredient amount.

… add @sevenui/component/tabs-03
Rigatoni with burst cherry tomatoes and basil

Burst tomato rigatoni

25 minEasy

Servings
4
  • Rigatoni400 g
  • Cherry tomatoes500 g
  • Garlic cloves, sliced4
  • Olive oil3 tbsp
  • Fresh basil leaves20
  • Parmesan, grated60 g

Vertical feature showcase

A landing page feature section with vertical tabs carrying an icon, title and summary that swap a framed product preview and stack on narrow containers.

… add @sevenui/component/tabs-04
Shared inbox with conversations assigned to teammates

Teams answer 38% faster in their first month.

Underline tabs with sliding indicator

Borderless pull request tabs with count pills, where a single Base UI indicator glides to the active tab and respects reduced motion.

… add @sevenui/component/tabs-05

Maya approved the migration plan and asked for a follow-up on index rebuild times.

Tabs with a disabled tab

A plan-locked Audit log tab rendered disabled with a lock icon and linked to a hint explaining how to unlock it.

… add @sevenui/component/tabs-06

Audit log is included on the Business plan.

Active seats
24 of 30
Renews on
Oct 14

Responsive tabs with select fallback

Controlled settings tabs that share one state with a native select, which replaces the tab list when the container gets narrow.

… add @sevenui/component/tabs-07

Account

Your name, email address, and the language used across the workspace.

Lazy tabs with loading and error states

Panels that load on first visit with a skeleton, a spinner on the trigger and aria-busy, and an invoices panel that fails once and offers a retry.

… add @sevenui/component/tabs-08

Folder tabs

File-folder tabs for a meeting recap whose active tab merges seamlessly into the card surface below.

… add @sevenui/component/tabs-09

Onboarding rollout sync

The team agreed to a staged rollout: 20% of new signups get the redesigned onboarding this week, with a go/no-go review once a full week of activation data is in.

Closable editor tabs

SQL editor document tabs you can add, close with a button or the Delete key with focus handed to the next tab, and scroll sideways when they overflow.

… add @sevenui/component/tabs-10
select region, sum(amount) as revenue
from invoices
where paid_at >= date '2026-07-01'
group by region
order by revenue desc;

Press Delete on a focused tab to close it.

API code snippet

An API endpoint reference with cURL, Node.js and Python tabs in a code frame and a copy button that confirms the copy to screen readers.

… add @sevenui/component/tabs-11

POST/v1/shipments

Create a shipment and get a label back in one request.

curl https://api.parcelhub.dev/v1/shipments \
  -H "Authorization: Bearer $PARCELHUB_KEY" \
  -d carrier=ups \
  -d service=ground \
  -d to_zip=94107

Conference schedule

A three-day conference agenda with date tile tabs, timed sessions with room and track, and bookmark toggles that keep a saved count.

… add @sevenui/component/tabs-12

Buildweek 2026 schedule

Lisbon · Oct 14–16

1 saved

  1. Opening keynote: shipping in smaller slicesAna RibeiroMain hallKeynote
  2. Design tokens that survive a rebrandJonas WeberRoom BDesign
  3. Edge caching without the stale surprisesPriya NairRoom AEngineering

Metric tabs chart

An analytics widget whose tab triggers are KPI tiles for revenue, orders and conversion, each switching the area chart below.

… add @sevenui/component/tabs-13

Storefront performance

Last 7 days compared with the week before

Checkout payment method

A checkout form with Card, Wallet and Bank tile tabs, formatted and validated card fields, an order summary and a confirmation state.

… add @sevenui/component/tabs-14

Payment method

You won't be charged until you confirm.

Studio plan, annual$228.00
Sales tax (8.5%)$19.38
Total due today$247.38

Components are the parts. Blocks are the page.

Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.

Browse blocksGet Pro — $99

One purchase, yours forever. $99 at launch instead of $249.