fetaUI
GitHub

Tabs

Switch between views of the same thing. Panels swipe with the finger and the indicator follows.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/tabs
Playground
REQUESTS24.1k
ERRORS0.12%
P95182 ms
Tab list, Pill
Tab list, Line
Activity
  • Deploy #418 promoted to production2M
  • Preview built for fix/auth-redirect14M
  • Environment variable rotated1H
  • Domain app.example.com verified3H
Members
  • Avery LaneOwner
  • Jordan PikeAdmin
  • Sam ReyesMember
  • Mia OrtizViewer
Billing
  • Pro plan, renews Nov 30$32 / month
  • Bandwidth640 of 1,000 GB
Line, with a count
A summary of traffic, conversions and the three reports waiting for you.
Vertical, with a disabled tab
Your name and email show on invoices and invites.
Icons
Style
Orientation
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/tabs

Activity

With content, panels slide with the indicator. On touch, swipe between them.

  • Deploy #418 promoted to production2M
  • Preview built for fix/auth-redirect14M
  • Environment variable rotated1H
  • Domain app.example.com verified3H
Style

Accessibility

  • Uses tablist, tab and tabpanel, linked by aria-controls.
  • Activation is automatic and uses one tab stop.
  • Panels out of view are inert.
  • A disabled tab explains why through its reason.

Motion

  • The indicator and the panel move on one spring, 420 over 38.
  • On touch, panels follow the finger and the indicator follows by the fraction. Past the ends they rubber band at 0.35.
  • The label moves from Regular to Medium in 160 ms, with its width reserved so neighbours stay put.
  • With reduced motion, the indicator and panel change at once. Swipes still follow the finger, with no rubber band.

Responsive behavior

  • Pill tabs are 28 px on Web and 36 px on Mobile. Line tabs are 40 and 48 px.
  • The tab list scrolls sideways when it does not fit.
  • Vertical tabs are 150 wide on Web and 128 on Mobile.

Performance

  • The indicator and panel track are motion values, so a finger moves them every frame without a React render.
  • Every panel stays mounted and inactive ones are inert, so lazy load heavy content yourself.
  • One ResizeObserver keeps the indicator on its tab.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Tabs from @/components/fetaui/tabs after installing it. items and label are required.
  • Leave out content for a bare tab list that drives your own view.
  • appearance is pill or line, orientation sets the arrow keys, and fill stretches the list.
  • A disabled tab takes reason, shown as a native title. Touch swipes work on horizontal tabs with panels.
/docs/components/tabs/markdown
PreviousNumber Stepper
NextProfile Dropdown

Related

Toggle GroupComponentToggles on one tray, for a single choice or several.Editor TabsComponentFile tabs for editors: the active tab sits on the surface, and unsaved files carry a warning dot.Tab BarComponentThree to five top destinations on Mobile, as a labeled bar or a floating dock.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.Navigation MenuComponentA tray pill of triggers with soft panels that morph as you move across them.