Striped Table

Pro

A borderless, zebra-striped style for dense data — no outer box, alternating row tint instead of dividers. Rows fade and slide in with a staggered delay on mount.

pnpm dlx shadcn@latest add @ditherui/table-striped

Name	Email	Role
Ava Chen	ava@ditherui.dev	Admin
Liam Cole	liam@ditherui.dev	Editor
Maya Patel	maya@ditherui.dev	Viewer
Noah Reyes	noah@ditherui.dev	Editor

Props

PropTypeDefault

TableRow classNamestring—

odd:bg-muted/40Tailwind utility for the zebra stripe—

TableRow initial / animatemotion variants—

TableRow transition delaynumber (per-row stagger)index * 0.06

When to use the table

Use the table for lists of records people scan and compare: members, invoices, logs. Rows fade and slide in on mount, and a striped variant suits dense data where dividers add noise.

Run the shadcn CLI with the DitherUI table name. The source is copied into your project, so you can change the row animation or styles directly.

Suggested components

Icon TransitionMorph one icon into another on state change.
New
BadgeStatus and category badges with subtle motion.
ProgressProgress bars that fill with a spring.