Tabs Edit

Examples

Account

Make changes to your account here. Click save when you're done.

Name

Username

Password

Change your password here. After saving, you'll be logged out.

Current password

New password

<%= render_tabs do %>
  <%= tab_list do %>
    <%= tab "Account" %>
    <%= tab "Password", active: true %>
  <% end %>
  <%= tab_panels do %>
    <%= tab_panel do %>
      <%= render "examples/components/tabs/code/account" %>
    <% end %>
    <%= tab_panel active: true do %>
      <%= render "examples/components/tabs/code/password" %>
    <% end %>
  <% end %>
<% end %>

Installation


  rails generate shadcn-ui tabs

Usage

<%= render_tabs do %>
  <%= tab_list do %>
    <%= tab title %>
    <%= tab title, active: true %>
  <% end %>
  <%= tab_panels do %>
    <%= tab_panel do %>
    <% end %>
    <%= tab_panel active: true do %>
    <% end %>
  <% end %>
<% end %>

The Tabs component introduces:

app/helpers/components/tabs_helper.rb
app/javascript/controllers/ui/tabs_controllers.rb
app/views/components/ui/_tabs.html.erb
app/views/components/ui/tabs/_tab.html.erb
app/views/components/ui/tabs/_panel.html.erb

render_tabs accepts two key blocks, tab_list and tab_panel. Within tab_list call tab for each tab, accepting the text you want for the tab and making one of them active: true to determine the starting active state of the tab. Within tab_panel call tab_panel for each tab panel, accepting a block for the content of the panel and making one of them active: true to determine the starting active state of the panels (generally corresponding to the active tab).