Docs

Molecules

Tabs

Tabbed container for switching between parallel views.

5 examplesInteractive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Tabs } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Horizontal Tabs

A simple three-tab set for switching views.

Basic Horizontal Tabs rendered preview

Project overview and key metrics.

Recent activity across your team.

Manage project configuration.

Tabs with Icons

Icons alongside tab labels for clear visual hierarchy.

Tabs with Icons rendered preview

The source for the current example.

The rendered output.

Vertical Settings Layout

A vertical tab list for settings-style navigation.

Vertical Settings Layout rendered preview

Update your public profile details.

Manage your account and security.

Choose what updates you receive.

Disabled Tab State

Prevent interaction with locked or restricted tabs.

Disabled Tab State rendered preview

General workspace preferences and member defaults.
Payment methods and invoice history.

Dashboard Filter Tabs

Compact period filter tabs for metrics and reporting suites.

Dashboard Filter Tabs rendered preview

Analytics Period

Seven-day analytics period
Thirty-day analytics period
Ninety-day analytics period
Active ARR Yield$48,250.00

Overview

Tabs is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Tabs adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/tabs.json