Tab Panel

<%= render(Zui::TabPanel.new) do |tp| %>
  <%= tp.with_group(id: "profile") do %>
    <%= tp.with_tab { "Profile" } %>
    <%= tp.with_panel { "Profile content " } %>
  <% end %>
  <%= tp.with_group(id: "notifications", selected: true) do %>
    <%= tp.with_tab { "Notifications" } %>
    <%= tp.with_panel { "Notification content" } %>
  <% end %>
<% end %>

<%= render(Zui::TabPanel.new) do |tp| %>
  <%= tp.with_group(id: "profile") do %>
    <%= tp.with_tab do %>
      <%= zui_icon("user") %>
      <span>Profile</span>
    <% end %>
    <%= tp.with_panel { "Profile content " } %>
  <% end %>
  <%= tp.with_group(id: "notifications") do %>
    <%= tp.with_tab do %>
      <%= zui_icon("bell") %>
      <span>Notifications</span>
      <%= zui("badge", color: :gray) { "5" } %>
    <% end %>
    <%= tp.with_panel { "Notification content" } %>
  <% end %>
<% end %>