Components
Tabs
Panels of related content behind one tab list, with arrow key navigation.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_tabs id: "my-component-tabs", label: "Project", class: "w-full" do |tabs| %>
<% tabs.panel "Overview" do %>
<%= lc_text "Pages, members and recent changes." %>
<% end %>
<% tabs.panel "Activity" do %>
<%= lc_text "Nothing new this week.", tone: :muted %>
<% end %>
<% tabs.panel "Settings" do %>
<%= lc_switch "Public project", name: "project[public]" %>
<% end %>
<% end %>Examples
Tabs
Pages, members and recent changes.
Nothing new this week.
<%= lc_tabs id: "example-0-tabs", label: "Project", class: "w-full" do |tabs| %>
<% tabs.panel "Overview" do %>
<%= lc_text "Pages, members and recent changes." %>
<% end %>
<% tabs.panel "Activity" do %>
<%= lc_text "Nothing new this week.", tone: :muted %>
<% end %>
<% tabs.panel "Settings" do %>
<%= lc_switch "Public project", name: "project[public]" %>
<% end %>
<% end %>Vertical, with manual activation
Name, photo and contact details.
Plan, invoices and payment method.
<%= lc_tabs id: "example-1-settings", label: "Settings", orientation: :vertical, activation: :manual, class: "w-full" do |tabs| %>
<% tabs.panel "Profile" do %>
<%= lc_text "Name, photo and contact details." %>
<% end %>
<% tabs.panel "Notifications" do %>
<%= lc_switch "Email me about mentions", name: "settings[mentions]" %>
<% end %>
<% tabs.panel "Billing" do %>
<%= lc_text "Plan, invoices and payment method.", tone: :muted %>
<% end %>
<% end %>API reference
Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.
lc_tabs
lc_tabs(id:, label:, selected: nil, orientation: :horizontal, activation: :automatic, list: {}, **attributes, &block)| Input | Default | Values |
|---|---|---|
| id | Required | — |
| label | Required | Accessible name, visible where applicable |
| selected | nil | — |
| orientation | :horizontal | — |
| activation | :automatic | — |
| list | {} | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
lc_tabs yields a builder, tabs, with these parts. Each part carries data-slot and merges class: and native attributes.
tabs.panel
tabs.panel(label, value: nil, **attributes, &block)| Input | Default | Values |
|---|---|---|
| label | Required | Accessible name, visible where applicable |
| value | nil | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
| block | Captured block | Captured Rails ERB content |
The examples also use lc_text and lc_switch. Each is documented on its own page.
Styling and extension
Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.