Tabs

Button-style Tabs

Tab content goes here.

      <%= render(RailsUi::Tabs::Component.new(
      items: [
        { label: 'Account', active: true },
        { label: 'Password', active: false }
      ]
    )) do |tabs| %>
      <p>Tab content goes here.</p>
    <% end %>

Nav-style Tabs

Tab content loaded via Turbo Frame

      <%= render(RailsUi::Tabs::Component.new(
      variant: :nav,
      items: [
        { label: 'My Account', href: '#account', active: true },
        { label: 'Company', href: '#company', active: false },
        { label: 'Team Members', href: '#team', active: false },
        { label: 'Billing', href: '#billing', active: false }
      ],
      turbo_frame: 'tab_content'
    )) do |tabs| %>
      <turbo-frame id="tab_content">
        <p>Tab content loaded via Turbo Frame</p>
      </turbo-frame>
    <% end %>