Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Striped Table
Table component with alternating row background colors using modulo index conditional className for zebra stripe pattern improving scannability
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Eyes lose their place in long tables—stripes guide the way. This React table uses shadcn/ui Table components with conditional bg-muted/50 on even rows based on index modulo for zebra stripe pattern. Built with alternating backgrounds that create visual rhythm, the striped table helps eyes track horizontally across columns—perfect for financial reports, transaction logs, data-heavy dashboards, long lists, or any interface where users scan many rows and need visual guides to prevent reading wrong row accidentally.
| ID | Description | Date | Amount |
|---|---|---|---|
| TXN-001 | Payment received | 2024-01-15 | $500.00 |
| TXN-002 | Subscription renewal | 2024-01-16 | $29.00 |
| TXN-003 | Refund processed | 2024-01-17 | -$150.00 |
| TXN-004 | Product purchase | 2024-01-18 | $89.99 |
| TXN-005 | Service fee | 2024-01-19 | $12.00 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Table
Standard table with borders
Table with Avatar
User table with avatar images
Table Without Dividers
Borderless row styling
Data Table
Advanced table with sorting
Badge
Status indicators for tables
Card
Alternative container styling