Tabs

Source: packages/shared/components/ui/tabs.tsx Primitives: @radix-ui/react-tabs

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@prosper/shared/components/ui/tabs";

---

Preview

OverviewAnalyticsSettings

Overview content goes here.

Sub-components

Component	Description
Tabs	Root — manages active tab state
TabsList	Container for tab triggers (pill-shaped bar)
TabsTrigger	Individual tab button
TabsContent	Content panel for each tab

---

Default Styling

• TabsList: bg-muted, rounded, flex row, h-9
• TabsTrigger: Rounded, px-2, muted text — active: bg-background, text-foreground, shadow
• TabsContent: mt-2

---

Usage Example

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content here</TabsContent>
  <TabsContent value="details">Details content here</TabsContent>
  <TabsContent value="settings">Settings content here</TabsContent>
</Tabs>

---

Used In

• Admin: JobDetailPage (Description / Candidates tabs)

---

Notes

• Override in Admin JobDetailPage: TabsList className="bg-transparent h-auto gap-4 p-0 mb-4" strips the default muted background and pill-shaped container, replacing it with a transparent, loosely-spaced row of tab triggers.
• Override in Admin JobDetailPage: TabsContent className="mt-0" removes the default mt-2 top margin for tighter layout.