Tabs

Panels of content, shown one at a time.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add tabs --yes

The tabs registry item installs these files:

app/components/ui_component.rb
app/components/ui/tabs_component.rb
app/components/ui/tabs/list_component.rb
app/components/ui/tabs/trigger_component.rb
app/components/ui/tabs/content_component.rb
app/helpers/ui/tabs_helper.rb
app/javascript/controllers/ui_tabs_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

The Stimulus controller implements the WAI-ARIA tabs pattern: roving tabindex, automatic activation with ←/→, Home/End, and the aria-controls/aria-labelledby wiring.

<%= ui_tabs(default_value: :account) do %>
  <%= ui_tabs_list do %>
    <%= ui_tabs_trigger(value: :account) { "Account" } %>
    <%= ui_tabs_trigger(value: :password) { "Password" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) { "Account settings" } %>
  <%= ui_tabs_content(value: :password) { "Password settings" } %>
<% end %>

Or render the components directly:

<%= render Ui::TabsComponent.new(default_value: :account) do %>
  <%= render Ui::Tabs::ListComponent.new do %>
    <%= render Ui::Tabs::TriggerComponent.new(value: :account) do %>
      Account
    <% end %>
  <% end %>
  <%= render Ui::Tabs::ContentComponent.new(value: :account) do %>
    Account settings

<%= render Ui::TabsComponent.new(default_value: :account) do %>
  <%= render Ui::Tabs::ListComponent.new do %>
    <%= render Ui::Tabs::TriggerComponent.new(value: :account) do %>
      Account
    <% end %>
  <% end %>
  <%= render Ui::Tabs::ContentComponent.new(value: :account) do %>
    Account settings
  <% end %>
<% end %>

Composition

Tabs (data-controller="ui-tabs")
|-- Tabs::List (role="tablist")
|   `-- Tabs::Trigger (role="tab", one per panel)
`-- Tabs::Content (role="tabpanel", one per value)

Examples

Default

Two panels with cards; the ui-tabs controller switches between them.

<%= ui_tabs(default_value: :account, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :account) { "Account" } %>
    <%= ui_tabs_trigger(value: :password) { "Password" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>

<%= ui_tabs(default_value: :account, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :account) { "Account" } %>
    <%= ui_tabs_trigger(value: :password) { "Password" } %>
  <% end %>
  <%= ui_tabs_content(value: :account) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>
        <%= ui_card_title { "Account" } %>
        <%= ui_card_description { "Change your profile details here." } %>
      <% end %>
      <%= ui_card_content(class: "grid gap-4") do %>
        <div class="grid gap-2">
          <%= ui_label(for: "tabs-demo-name") { "Name" } %>
          <%= ui_input(id: "tabs-demo-name", value: "Eduardo de Moraes") %>
        </div>
      <% end %>
      <%= ui_card_footer do %>
        <%= ui_button { "Save changes" } %>
      <% end %>
    <% end %>
  <% end %>
  <%= ui_tabs_content(value: :password) do %>
    <%= ui_card do %>
      <%= ui_card_header do %>
        <%= ui_card_title { "Password" } %>
        <%= ui_card_description { "Change your sign-in password here." } %>
      <% end %>
      <%= ui_card_content(class: "grid gap-4") do %>
        <div class="grid gap-2">
          <%= ui_label(for: "tabs-demo-password") { "New password" } %>
          <%= ui_input(id: "tabs-demo-password", type: :password) %>
        </div>
      <% end %>
      <%= ui_card_footer do %>
        <%= ui_button { "Save password" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Disabled trigger

disabled: true removes the trigger from the keyboard flow and from activation.

<%= ui_tabs(default_value: :overview, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :overview) { "Overview" } %>
    <%= ui_tabs_trigger(value: :analytics, disabled: true) { "Analytics" } %>
  <% end %>
  <%= ui_tabs_content(value: :overview, class: "rounded-md border p-4 text-sm") do %>
    Disabled triggers stay out of the keyboard flow.
  <% end %>

<%= ui_tabs(default_value: :overview, class: "w-full max-w-sm") do %>
  <%= ui_tabs_list(class: "w-full") do %>
    <%= ui_tabs_trigger(value: :overview) { "Overview" } %>
    <%= ui_tabs_trigger(value: :analytics, disabled: true) { "Analytics" } %>
  <% end %>
  <%= ui_tabs_content(value: :overview, class: "rounded-md border p-4 text-sm") do %>
    Disabled triggers stay out of the keyboard flow.
  <% end %>
  <%= ui_tabs_content(value: :analytics, class: "rounded-md border p-4 text-sm") do %>
    Unavailable.
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Tabs`	`default_value`	`nil`	The tab open at first; with no value, the first enabled one is activated.
`Tabs::Trigger`	`value:` (required)	—	The identifier tying a trigger to the panel with the same `value`.
`Tabs::Trigger`	`disabled`	`false`	Removes the trigger from activation and from the keyboard flow.
`Tabs::Content`	`value:` (required)	—	The matching panel; renders `hidden` until activated.