Tabs - Rails UI Components

Usage

<%= ui.tabs do %>
  <%= ui.tabs_item "Profile", href: profile_path, active: true %>
  <%= ui.tabs_item "Settings", href: settings_path %>
  <%= ui.tabs_item "Notifications", href: notifications_path %>
<% end %>

<%= ui.tabs variant: :underline do %>
  <%= ui.tabs_item "Tab 1", href: "#", active: true %>
  <%= ui.tabs_item "Tab 2", href: "#" %>
<% end %>

Props

Prop	Type	Default	Description
`variant`	`Symbol` `:pill` \| `:underline`	`:pill`	Visual style of the tabs.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`tabs_item`	`ui.tabs_item`	Individual tab item rendered as a link.

Examples

Pill (default)

<%= ui.tabs do %>
  <%= ui.tabs_item "Tab 1", href: "#", active: true %>
  <%= ui.tabs_item "Tab 2", href: "#" %>
  <%= ui.tabs_item "Tab 3", href: "#" %>
<% end %>

Pill with icons

<%= ui.tabs do %>
  <%= ui.tabs_item "Profile", href: "#", icon: "user" %>
  <%= ui.tabs_item "Settings", href: "#", icon: "cog", active: true %>
  <%= ui.tabs_item "Notifications", href: "#", icon: "bell" %>
<% end %>

Underline

<%= ui.tabs variant: :underline do %>
  <%= ui.tabs_item "Profile", href: "#", active: true %>
  <%= ui.tabs_item "Dashboard", href: "#" %>
  <%= ui.tabs_item "Settings", href: "#" %>
  <%= ui.tabs_item "Contacts", href: "#" %>
<% end %>