Tabs

Underlined, pill, and full-width-bordered tab bars. Click any tab to switch active state.

Preview

Team members panel.

4 candidates in interviews.

Team panel.

React preview

LiveView (HEEx)

alias DesignSystem.UI.Tabs

# Navigation mode (renders <a href> links)
<Tabs.tabs
  id="settings-tabs"
  variant="underline"
  tabs={[
    %{label: "Account", href: ~p"/settings", active: @page == :account, icon: "hero-user-mini"},
    %{label: "Team", href: ~p"/settings/team", active: @page == :team, count: 4},
    %{label: "Billing", href: ~p"/settings/billing", active: @page == :billing}
  ]}
/>

# Panel mode (button-driven with phx-click; reveal panels with :if)
<Tabs.tabs
  id="inbox-tabs"
  variant="pill"
  active={@active_tab}
  on_change="select_tab"
>
  <:tab label="Unread"><.live_component module={UnreadList} id="unread" /></:tab>
  <:tab label="Archived"><.live_component module={ArchivedList} id="archived" /></:tab>
</Tabs.tabs>

React (JSX)

import { Tabs } from "../ui/index.mjs"
import { UserIcon, UsersIcon, CreditCardIcon } from "@heroicons/react/20/solid"

const tabs = [
  { label: "Account", icon: UserIcon, content: <AccountPanel /> },
  { label: "Team", icon: UsersIcon, count: 4, content: <TeamPanel /> },
  { label: "Billing", icon: CreditCardIcon, content: <BillingPanel /> },
]

<Tabs tabs={tabs} variant="underline" defaultIndex={0} />