Tabs Component

Tab component

Tabs Component

Tabs are a common UI pattern used to switch between related sections of content without navigating away from the page. They help organize information in a structured and compact layout while keeping the interface clean.

In this component, I first built a simple state-driven version and then evolved it into a reusable compound component using React context.

Basic Version

The initial implementation used local state to track the active tab.

• Index-based switching
• Direct conditional rendering
• All logic inside one component

This works well for small cases but becomes difficult to scale or customize.

Compound Component Version

To make the component reusable and extensible, I broke it into smaller parts:

• Tabs → Root wrapper that owns state
• TabsList → Container for tab triggers
• TabsTrigger → Handles interaction
• TabsContent → Displays active panel
• Context Layer → Shares value and update logic

This enables a clean and declarative API:

<Tabs defaultValue="html">
  <TabsList>
    <TabsTrigger value="html">HTML</TabsTrigger>
    <TabsTrigger value="css">CSS</TabsTrigger>
  </TabsList>
 
  <TabsContent value="html">...</TabsContent>
  <TabsContent value="css">...</TabsContent>
</Tabs>