Tabs

Primary and secondary tabs with the indicator animation built in.

import { Tabs, TabList, Tab, TabPanel } from "@brijbyte/md3-react/tabs";

@import "@brijbyte/md3-react/tabs.css";

Primary tabs

Switching tabs feels physical, not instant: the active indicator stretches to reach the next label before snapping to its width, matching MDC Android's motion exactly. Arrow keys move focus and activate, so keyboard users get the same behavior for free.

Search hundreds of airlines and compare fares in one place.

Secondary tabs

Nest a second level of navigation inside a page without competing with the primary tabs above it: a flatter 2dp indicator spans the full tab width instead of hugging the label.

Secondary tabs sit within a content area to separate related content.

With icons and badges

import { Badge } from "@brijbyte/md3-react/badge";

@import "@brijbyte/md3-react/badge.css";

Add an icon without reworking spacing yourself: primary tabs stack it above the label at 64dp, while secondary tabs keep it inline, matching each variant's spec height.

Surface a count or a "new content" dot without hand-positioning it: pass badge to a Tab and it anchors to the icon's top-right corner, or sits inline after the label on text-only tabs. Badges are visual only, so put the count in the tab's aria-label too if it's meaningful.