Row Stagger Table

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/table-row-stagger

Usage

import { TableRowStagger } from "@/components/table-row-stagger";

export default function Page() {
  return (
    <TableRowStagger caption="Invoices issued this quarter" stagger={0.05}>
      <thead>
        <tr>
          <th scope="col">Invoice</th>
          <th scope="col">Client</th>
          <th scope="col">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>INV-0041</td>
          <td>Acme Ltd</td>
          <td>1,200.00</td>
        </tr>
        <tr>
          <td>INV-0042</td>
          <td>Northwind</td>
          <td>860.00</td>
        </tr>
      </tbody>
    </TableRowStagger>
  );
}

Props

Customisation

Row Stagger Table declares no tokens of its own; it is a semantic frame that consumes the global semantic tokens through the Tailwind utilities on the table and caption, and your thead and tbody markup owns the cell styling. Space the reveals further apart with the stagger prop, restyle the table from the className prop, and retheme your rows through the same semantic tokens the rest of the library uses:

<TableRowStagger stagger={0.1} className="text-sm">
  {rows}
</TableRowStagger>

/* rows styled with semantic tokens */
:root {
  --border: oklch(from var(--color-neutral-50) l c h / 0.16);
}

Frequently asked questions

Is Row Stagger Table free for commercial use?

Yes. Row Stagger Table is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does Row Stagger Table affect performance or accessibility?

The reveal animates transform and opacity only, inside space the table has already reserved, so layout shift is zero. You author the thead and tbody yourself and the component passes them through untouched, keeping real table semantics, and animation never changes the DOM order. The from-state is applied only when the single run-once ScrollTrigger fires, so keyboard users, crawlers and no-JS visitors always see every row, and with reduced motion enabled no triggers are created at all.

Can I change the speed of the row cascade?

Yes. The stagger prop sets the gap in seconds between one row starting and the next, and defaults to 0.05. Raise it for a slower, more deliberate cascade or lower it for a quicker one. Each row's own rise and fade uses the shared library timing, and the header row is never part of the cascade.

Related components

• Expandable Rows
• FLIP Sort Table