Components

Table

Native tables with clear headers and subtle row dividers. Keep captions, headers and scroll containers in the view.

After the one-time setup, call the helper directly from ERB. No component import is needed.

<div class="overflow-x-auto" tabindex="0" role="region" aria-label="Recent activity">
  <%= lc_table do %>
    <caption>Recent activity</caption>
    <thead>
      <tr><th scope="col">Project</th><th scope="col">Status</th><th scope="col" class="text-end">Members</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">WariWari</th><td>Active</td><td class="text-end tabular-nums">4</td></tr>
      <tr><th scope="row">Personal site</th><td>Active</td><td class="text-end tabular-nums">1</td></tr>
    </tbody>
  <% end %>
</div>

Recent activity
Project	Status	Members
WariWari	Active	4
Personal site	Active	1

<div class="overflow-x-auto" tabindex="0" role="region" aria-label="Recent activity">
  <%= lc_table do %>
    <caption>Recent activity</caption>
    <thead>
      <tr><th scope="col">Project</th><th scope="col">Status</th><th scope="col" class="text-end">Members</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">WariWari</th><td>Active</td><td class="text-end tabular-nums">4</td></tr>
      <tr><th scope="row">Personal site</th><td>Active</td><td class="text-end tabular-nums">1</td></tr>
    </tbody>
  <% end %>
</div>

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_table

lc_table(**attributes, &block)

Input	Default	Values
attributes	{}	Native HTML attributes; class:, data: and aria: merge with defaults
block	Captured block	Captured Rails ERB content

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.

API JSON · LLM reference