Skip to content
FelicityUI

Tabs

Underline tablist with ruled baseline — not pill tabs.

Quiet summary surface.

Installation

terminal
npx felicityui add tabs --platform react

Usage

example.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Quiet summary surface.</TabsContent>
  <TabsContent value="settings">Configuration fields live here.</TabsContent>
</Tabs>

Composition

Tabs
├── TabsList
│   └── TabsTrigger
└── TabsContent

Underline tablist with ruled baseline — not pill tabs.

FelicityUI uses native HTML, semantic tokens, and ruled surfaces. Install with felicityui add tabs --platform react.

Underline tabs

Felicity uses underline triggers, not pill chrome.

Quiet summary surface.

API Reference

PropTypeDefaultDescription
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Native semantics and keyboard support.
  • Visible focus indicator.
  • Sufficient contrast on semantic token pairs.

Platform notes

React

Native HTML with Felicity semantic tokens. Paper/ink surfaces, copper accent used sparingly, hairline borders, and ruled layouts — not generic SaaS chrome.

  • Server Component compatible unless marked use client.
  • Uses data-slot attributes for anatomy.
  • Focus-visible rings use color.focus.ring.