Tabs

Keyed tab and panel pairs with automatic or manual keyboard activation.

Source
app/components/nitro_kit/tabs.rb
API
NitroKit::Tabs.new(id:, default:) { |tabs| tabs.tab(key, label) { panel } }

Workspace settings

Each declaration owns its panel; all panels remain readable until Stimulus enhances the APG tab behavior.

Settings sections

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/tabs_page.rb
render NitroKit::Tabs.new(
  id: "gallery-tabs-settings",
  default: :members,
  label: "Workspace settings"
) do |tabs|
  tabs.tab(:general, "General") { "Workspace name and regional preferences." }
  tabs.tab(:members, "Members") { "Manage roles, invitations, and access." }
  tabs.tab(:billing, "Billing") { "Review plan, payment method, and invoices." }
end

Orientation and activation

Horizontal and vertical tablists expose automatic or manual keyboard activation after enhancement.

Vertical manual tabs

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/tabs_page.rb
render NitroKit::Tabs.new(
  id: "gallery-tabs-vertical-manual",
  default: :security,
  label: "Account controls",
  orientation: :vertical,
  activation: :manual
) do |tabs|
  tabs.tab(:profile, "Profile") { "Name, photo, and public account details." }
  tabs.tab(:security, "Security") { "Password, recovery codes, and active sessions." }
  tabs.tab(:notifications, "Notifications") { "Email and workspace notification preferences." }
  tabs.tab(:legacy, "Legacy authentication", disabled: true) do
    "Legacy authentication is unavailable for new workspaces."
  end
end

Single tab

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/tabs_page.rb
render NitroKit::Tabs.new(id: "gallery-tabs-one", label: "Release information") do |tabs|
  tabs.tab(:summary, "Summary") { "Release 1842 is operational in the EU region." }
end

Content pressure

Many tabs, long labels, long panel copy, and disabled choices retain deterministic relationships.

Many long tabs

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/tabs_page.rb
render NitroKit::Tabs.new(
  id: "gallery-tabs-pressure",
  default: :regional_preferences,
  label: "Extended workspace administration"
) do |tabs|
  tabs.tab(:general, "General") { "Workspace identity and ownership." }
  tabs.tab(:regional_preferences, "Regional preferences and time-zone behavior") do
    p do
      "Dates use the workspace locale while audit timestamps retain their original UTC value. " \
        "Individual members may choose a different display time zone without changing stored events."
    end
  end
  tabs.tab(:members, "Members") { "Roles, invitations, and deactivation." }
  tabs.tab(:security, "Security") { "Sessions, recovery, and authentication policies." }
  tabs.tab(:integrations, "Integrations") { "Connected services and delivery status." }
  tabs.tab(:billing, "Billing") { "Plan, payment method, and invoice history." }
  tabs.tab(:legacy, "Legacy provisioning", disabled: true) do
    "Legacy provisioning is no longer available."
  end
end

Settings composition

A complete settings surface nests forms, cards, status, tables, and grouped actions in panels.

Workspace administration

Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/tabs_page.rb
render NitroKit::Tabs.new(
  id: "gallery-tabs-administration",
  default: :profile,
  label: "Workspace administration",
  orientation: :vertical,
  activation: :manual
) do |tabs|
  tabs.tab(:profile, "Profile") { render_profile_settings }
  tabs.tab(:members, "Members") { render_member_settings }
  tabs.tab(:billing, "Billing") { render_billing_settings }
end