Keyed tab and panel pairs with automatic or manual keyboard activation.
app/components/nitro_kit/tabs.rbNitroKit::Tabs.new(id:, default:) { |tabs| tabs.tab(key, label) { panel } }Each declaration owns its panel; all panels remain readable until Stimulus enhances the APG tab behavior.
test/dummy/app/components/gallery/components/tabs_page.rbrender 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." }
endHorizontal and vertical tablists expose automatic or manual keyboard activation after enhancement.
test/dummy/app/components/gallery/components/tabs_page.rbrender 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
endtest/dummy/app/components/gallery/components/tabs_page.rbrender NitroKit::Tabs.new(id: "gallery-tabs-one", label: "Release information") do |tabs|
tabs.tab(:summary, "Summary") { "Release 1842 is operational in the EU region." }
endMany tabs, long labels, long panel copy, and disabled choices retain deterministic relationships.
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.
test/dummy/app/components/gallery/components/tabs_page.rbrender 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
endA complete settings surface nests forms, cards, status, tables, and grouped actions in panels.
| Member | Role | Status |
|---|---|---|
| Ada Lovelace | Owner | Active |
| Grace Hopper | Admin | Active |
| Katherine Johnson | Member | Invited |
USD 49.00 monthly · renews August 1, 2026
test/dummy/app/components/gallery/components/tabs_page.rbrender 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