Simple Tabs

An underlined tabs component with optional icons and animated indicator. Great for page-level navigation within content areas.

Installation

import { SimpleTabs, SimpleTabsPanel } from "@sourceful-energy/ui"
// Or use the compound component pattern:
import { SimpleTabsRoot, SimpleTabsList, SimpleTabsTrigger, SimpleTabsContent } from "@sourceful-energy/ui"

Usage

Overview

Overview content goes here. This tab shows a summary of your data.

Examples

Without Icons

Daily view content

Compound Component Pattern

For more flexibility, you can use the compound component pattern:

Account settings and preferences.

Controlled Mode

Current tab:overview

Overview content

Comparison with Tabs

SimpleTabs uses an underline style ideal for page-level navigation, while Tabs (from Radix UI) uses a pill/box style better suited for switching between views in a contained area.

Use SimpleTabs for page sections (Overview, Devices, Settings)
Use Tabs for toggling views within cards or panels

Props

SimpleTabs

Prop	Type	Default	Description
tabs	SimpleTab[]	-	Array of tab definitions with id, label, and optional icon
activeTab	string	-	Currently active tab id (controlled mode)
defaultTab	string	first tab	Default active tab id (uncontrolled mode)
onTabChange	(tabId: string) => void	-	Callback when tab changes

Type Definitions

interface SimpleTab {
  id: string
  label: string
  icon?: React.ReactNode
  disabled?: boolean
}