Tabs
Switch between related views within the same context.
Default
Standard tabs with an animated active indicator.
Your site summary across all commodities, including consumption, cost and emissions trends at a glance.
Track electricity consumption, peak demand and power factor down to the interval level for each meter.
Monitor water usage in m³, spot anomalies and compare against your baseline period.
Animated underline
Tabs with a sliding underline that follows the active tab.
Your site summary across all commodities, including consumption, cost and emissions trends at a glance.
API reference
A tabbed interface: a List of Triggers reveals matching Content panels.
Full props on Base UI TabsAnatomy
Tabs | Root managing the orientation and active tab value. |
TabsList | Container arranging the tab triggers. |
TabsTrigger | Clickable tab that activates its panel. |
TabsContent | Panel content shown for the active tab. |
Props
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
Tabs | variant | "default" | "line" | "default" | TabsList style: filled (default) or underlined (line). |