Primitives

Tabs

File tabs. Tabs switches a panel in place; TabNav is a row of route links. One brand underline travels to the active tab, a Phosphor icon fills when active and grows on hover.

view .md

Preview

with icons · hover one

export default function Home()

route tabs · with end

main

without icons

Installation

terminal

bash

npx @entrepta/cli@latest add tabs

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

tabs.tsx

tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/entrepta/tabs"
import { FileTsxIcon, FileMdIcon, BracketsCurlyIcon } from "@phosphor-icons/react"

<Tabs defaultValue="home">
  <TabsList>
    <TabsTrigger value="home" icon={FileTsxIcon}>home.tsx</TabsTrigger>
    <TabsTrigger value="about" icon={FileMdIcon}>about.md</TabsTrigger>
    <TabsTrigger value="stack" icon={BracketsCurlyIcon}>stack.json</TabsTrigger>
  </TabsList>
  <TabsContent value="home" className="p-5">…</TabsContent>
  <TabsContent value="about" className="p-5">…</TabsContent>
  <TabsContent value="stack" className="p-5">…</TabsContent>
</Tabs>

// A tab with no icon has nothing in front of its label
<TabsTrigger value="home">home.tsx</TabsTrigger>

// Tabs that are routes, as the editor's title bar:
// pass active, render your router's link with asChild
import { TabNav, TabNavLink } from "@/components/entrepta/tabs"

<TabNav aria-label="Pages" variant="window" end={<span>main</span>}>
  <TabNavLink asChild active={pathname === "/"} icon={HouseLineIcon}>
    <Link href="/">home.tsx</Link>
  </TabNavLink>
  <TabNavLink asChild active={pathname === "/about"} icon={UserSquareIcon}>
    <Link href="/about">about.md</Link>
  </TabNavLink>
</TabNav>

Props

Prop	Type	Default	Description
indicator	ReactNode	-	A glyph before the label of the active tab, for tabs with no icon. None by default (Tabs, TabNav)
defaultValue	string	-	Initially active tab (uncontrolled)
value	string	-	Controlled active tab
onValueChange	(value: string) => void	-	Callback when active tab changes
end	ReactNode	-	Pinned right, outside the scroller, as muted meta (TabsList, TabNav)
icon	ReactNode \| Icon	-	An element, or a Phosphor icon that fills when active and grows on hover
active	boolean	false	Marks the current route (TabNavLink)
asChild	boolean	false	Renders your router's link (TabNavLink)