Primitives

Tabs

Editor-style tab navigation via Radix Tabs. Active tab is marked with a ◆ glyph in brand color. Tabs can be closable and accept icons.

Preview

// landing page

export default function Home()

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"

<Tabs defaultValue="home">
  <TabsList>
    <TabsTrigger value="home" onClose={() => {}}>home.tsx</TabsTrigger>
    <TabsTrigger value="about" onClose={() => {}}>about.md</TabsTrigger>
    <TabsTrigger value="stack" onClose={() => {}}>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>

Props

Prop	Type	Default	Description
defaultValue	string	—	Initially active tab (uncontrolled)
value	string	—	Controlled active tab
onValueChange	(value: string) => void	—	Callback when active tab changes
icon	ReactNode	—	Optional icon prefix (TabsTrigger)
onClose	() => void	—	Shows close ✕ when set (TabsTrigger)