Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Standard

Table Without Dividers for React

A table of products with no lines between the rows.

Framework
UI library

Four products in a frame with no row rules: every TableRow clears its bottom border, and the header row also turns off its hover fill. The rows are told apart by their spacing and the hover on the body rows. Use it for short lists in a quiet layout, such as a card or a summary panel.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the row lines removed?

Every body TableRow sets border-b-0, which clears the bottom border that TableRow draws. The header TableRow sets it too.

Does the header row highlight on hover?

The header TableRow sets hover:bg-transparent, so hovering the labels does not fill the row.Body rows still use hover:bg-muted/50.

How are price and stock aligned?

Both headers and both cells use text-end. The product name cell is font-medium. Category is plain text.

Does the outer frame stay?

Yes. The rows drop their rules, and the outer div still has max-w-4xl rounded-md border bg-background. Table scrolls sideways inside that frame.

What is the row key?

product.name. The four products are Laptop, Headphones, Keyboard and Mouse.

Is there a line under the column labels?

No. The header row drops its bottom border as well, so nothing rules off the labels from Laptop.

All 8 table examples