Retents UI

Tabs

A tabbed interface component built on Radix UI Tabs primitive.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@retents/ui/tabs"

Usage Guidelines

When to use

  • For switching between different views or sections within the same page context (e.g., Account vs. Password settings).
  • When the sections are related but independent, and the user benefits from seeing only one at a time.
  • When there are 2–6 sections with short labels.

When NOT to use

  • For progressive disclosure of stacked content — use Accordion instead.
  • For page-level navigation that changes the URL — use your router's navigation instead.
  • For a large number of sections (7+) — tabs become hard to scan. Consider a sidebar or list layout.

Preview

Features

  • Active tab indicated with a bottom border in the primary color
  • Accessible keyboard navigation (arrow keys)
  • Smooth transitions between tab content

Source

On this page