Blocks

Tabs

Organises content into distinct panels, showing one at a time via a tab strip.

Usage

Set default_value: on tabs to control which panel is shown on first render. Each tabs_trigger and tabs_content pair shares the same value:.

Manage your account details and preferences.

Change your password and security settings.

Choose what notifications you receive.

sui.tabs default_value: "account" do
  sui.tabs_list do
    sui.tabs_trigger "Account",       value: "account"
    sui.tabs_trigger "Password",      value: "password"
    sui.tabs_trigger "Notifications", value: "notifications"
  end
  sui.tabs_content value: "account" do
    "Manage your account details and preferences."
  end
  sui.tabs_content value: "password" do
    "Change your password and security settings."
  end
  sui.tabs_content value: "notifications" do
    "Choose what notifications you receive."
  end
end

With richer content

Tab content can hold any markup — forms, cards, lists, etc.

Total revenue

$45,231.89

+20.1% from last month

Recent sign-ins

Chrome · macOS · 2 minutes ago

Safari · iOS · 1 hour ago

sui.tabs default_value: "overview" do
  sui.tabs_list do
    sui.tabs_trigger "Overview", value: "overview"
    sui.tabs_trigger "Activity", value: "activity"
  end
  sui.tabs_content value: "overview" do
    # any content here
  end
  sui.tabs_content value: "activity" do
    # any content here
  end
end

API

Method	Key args	Default	Description
tabs	default_value:	nil	Root container. Mounts the `shadcnrb--tabs` Stimulus controller and sets the initial active tab.
tabs_list	—	—	Tab strip container with `role="tablist"`.
tabs_trigger(name, value:)	value: (required)	—	Individual tab button. `value:` must match the corresponding `tabs_content`.
tabs_content(value:)	value: (required)	—	Panel shown when the matching trigger is active. Hidden panels remain in the DOM.