Components
Tab
Tab
An arrangement of tab panels, each revealing layered sections of content one at a time.
Base
Some activities...
Account information...
Billing information...
Team information...
<div data-controller="railsui-tabs"
data-railsui-tabs-active-tab="border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4"
data-railsui-tabs-inactive-tab="border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4">
<div class="border-slate-200 border-b text-slate-600 dark:text-slate-100 dark:border-slate-600 font-medium text-sm">
<nav role="navigation" class="-mb-px">
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4">Activity</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4">Account</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4">Billing</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4">Team</a>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div><div data-controller="railsui-tabs"
data-railsui-tabs-active-tab="border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4"
data-railsui-tabs-inactive-tab="border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4">
<div class="border-slate-200 border-b text-slate-600 dark:text-slate-100 dark:border-slate-600 font-medium text-sm">
<nav role="navigation" class="-mb-px">
<%= link_to "Activity", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4" %>
<%= link_to "Account", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4" %>
<%= link_to "Billing", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4" %>
<%= link_to "Team", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4" %>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div>%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4", "data-railsui-tabs-inactive-tab" => "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4"}
.border-slate-200.border-b.text-slate-600.dark:text-slate-100.dark:border-slate-600.font-medium.text-sm
%nav.-mb-px{role: "navigation"}
= link_to "Activity", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-primary-600 inline-block bg-white text-primary-600 dark:bg-transparent dark:text-white dark:border-primary-400 py-3 px-4"
= link_to "Account", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4"
= link_to "Billing", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4"
= link_to "Team", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-slate-200 inline-block bg-white text-slate-600 dark:bg-transparent dark:text-slate-100 dark:border-slate-600 py-3 px-4"
.p-4{"data-railsui-tabs-target" => "panel"}
Some activities...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Account information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Billing information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Team information...import { RailsuiTabs } from 'railsui-stimulus'
application.register('railsui-tabs', RailsuiTabs)Pill
Some activities...
Account information...
Billing information...
Team information...
<div
data-controller="railsui-tabs"
data-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white"
data-tabs-inactive-tab="py-2 px-4 rounded-full inline-block dark:bg-transparent dark:text-slate-300">
<div class="text-slate-600 dark:text-slate-300">
<nav role="navigation" class="flex items-center space-x-1 font-medium text-sm">
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white">Activity</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300">Account</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300">Billing</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300">Team</a>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div><div
data-controller="railsui-tabs"
data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white"
data-railsui-tabs-inactive-tab="py-2 px-4 rounded-full inline-block dark:bg-transparent dark:text-slate-300">
<div class="text-slate-600 dark:text-slate-300">
<nav role="navigation" class="flex items-center space-x-1 font-medium text-sm">
<%= link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Account", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Billing", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Team", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div>%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white", "data-railsui-tabs-inactive-tab" => "py-2 px-4 rounded-full inline-block dark:bg-transparent dark:text-slate-300"}
.text-slate-600.dark:text-slate-300
%nav.flex.items-center.space-x-1.font-medium.text-sm{role: "navigation"}
= link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-full text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Account", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Billing", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Team", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
.p-4{"data-railsui-tabs-target" => "panel"}
Some activities...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Account information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Billing information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Team information...import { RailsuiTabs } from 'railsui-stimulus'
application.register('railsui-tabs', RailsuiTabs)Rounded
Some activities...
Account information...
Billing information...
Team information...
<div
data-controller="railsui-tabs"
data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white"
data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300">
<div>
<nav role="navigation" class="flex items-center text-gray-600 space-x-1 font-medium text-sm">
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white">Activity</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Account</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Billing</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Team</a>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div><div
data-controller="railsui-tabs"
data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white"
data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300">
<div>
<nav role="navigation" class="flex items-center text-gray-600 space-x-1 font-medium text-sm">
<%= link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Account", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Billing", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
<%= link_to "Team", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div>%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", "data-railsui-tabs-inactive-tab" => "py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300"}
%div
%nav.flex.items-center.text-gray-600.space-x-1.font-medium.text-sm{role: "navigation"}
= link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Account", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Billing", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
= link_to "Team", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
.p-4{"data-railsui-tabs-target" => "panel"}
Some activities...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Account information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Billing information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Team information...import { RailsuiTabs } from 'railsui-stimulus'
application.register('railsui-tabs', RailsuiTabs)With icons
Some activities...
Account information...
Billing information...
Team information...
<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600">
<div class="border-slate-200 border-b text-slate-600 dark:text-slate-200 dark:border-slate-600 text-sm font-medium">
<nav role="navigation" class="-mb-px flex items-center flex-wrap">
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
class="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t">
<%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
<span>Activity</span>
</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
<%= icon "user-circle", class: "size-5" %>
<span>Account</span>
</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
<%= icon "credit-card", class: "size-5" %>
<span>Billing</span>
</a>
<a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
<%= icon "users", class: "size-5" %>
<span>Team</span>
</a>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div><div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600">
<div class="border-slate-200 border-b text-slate-600 dark:text-slate-200 dark:border-slate-600 text-sm font-medium">
<nav role="navigation" class="-mb-px flex items-center flex-wrap">
<%= link_to "#", class: "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
<%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
<span>Activity</span>
<% end %>
<%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
<%= icon "user-circle", class: "size-5" %>
<span>Account</span>
<% end %>
<%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
<%= icon "credit-card", class: "size-5" %>
<span>Billing</span>
<% end %>
<%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
<%= icon "users", class: "size-5" %>
<span>Team</span>
<% end %>
</nav>
</div>
<div class="p-4" data-railsui-tabs-target="panel">
Some activities...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Account information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Billing information...
</div>
<div class="hidden p-4" data-railsui-tabs-target="panel">
Team information...
</div>
</div>%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", "data-railsui-tabs-inactive-tab" => "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600"}
.border-slate-200.border-b.text-slate-600.dark:text-slate-200.dark:border-slate-600.text-sm.font-medium
%nav.-mb-px.flex.items-center.flex-wrap{role: "navigation"}
= link_to "#", class: "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
= icon "chat-bubble-oval-left-ellipsis", class: "size-5"
%span Activity
= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
= icon "user-circle", class: "size-5"
%span Account
= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
= icon "credit-card", class: "size-5"
%span Billing
= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
= icon "users", class: "size-5"
%span Team
.p-4{"data-railsui-tabs-target" => "panel"}
Some activities...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Account information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Billing information...
.hidden.p-4{"data-railsui-tabs-target" => "panel"}
Team information...import { RailsuiTabs } from 'railsui-stimulus'
application.register('railsui-tabs', RailsuiTabs)