Blocks

Tabs

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

Installation

bin/rails g shadcnrb:component tabs

Usage

Set default_value: on sui.tabs to control which panel is shown on first render. Each t.trigger and t.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 |t| %>
  <%= t.list do %>
    <%= t.trigger "Account",       value: "account" %>
    <%= t.trigger "Password",      value: "password" %>
    <%= t.trigger "Notifications", value: "notifications" %>
  <% end %>
  <%= t.content value: "account" do %>
    <p class="text-sm text-muted-foreground pt-2">Manage your account details and preferences.</p>
  <% end %>
  <%= t.content value: "password" do %>
    <p class="text-sm text-muted-foreground pt-2">Change your password and security settings.</p>
  <% end %>
  <%= t.content value: "notifications" do %>
    <p class="text-sm text-muted-foreground pt-2">Choose what notifications you receive.</p>
  <% 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 |t| %>
  <%= t.list do %>
    <%= t.trigger "Overview", value: "overview" %>
    <%= t.trigger "Activity", value: "activity" %>
  <% end %>
  <%= t.content value: "overview" do %>
    <div class="pt-2 space-y-1">
      <p class="text-sm font-medium">Total revenue</p>
      <p class="text-2xl font-bold">$45,231.89</p>
      <p class="text-xs text-muted-foreground">+20.1% from last month</p>
    </div>
  <% end %>
  <%= t.content value: "activity" do %>
    <div class="pt-2 space-y-1">
      <p class="text-sm font-medium">Recent sign-ins</p>
      <p class="text-xs text-muted-foreground">Chrome · macOS · 2 minutes ago</p>
      <p class="text-xs text-muted-foreground">Safari · iOS · 1 hour ago</p>
    </div>
  <% end %>
<% end %>

API

Method	Args	Default	Description
`sui.tabs`	`default_value:`	`nil`	Root container. Mounts the `shadcnrb--tabs--component` Stimulus controller, sets the initial active tab, yields a `t` proxy.
`t.list`	—	—	Tab strip container with `role="tablist"`.
`t.trigger(name, value:)`	`value: (required)`	—	Individual tab button. `value:` must match the corresponding `t.content`.
`t.content(value:)`	`value: (required)`	—	Panel shown when the matching trigger is active. Hidden panels remain in the DOM.