shadcn.io is an independent project built on shadcn/ui
A bordered table of products with no line between the rows. The columns are Product, Category, Price and Stock. Laptop is first, in Electronics, at $999.00, with 24 in stock.
Drop the row lines for a short, quiet list. A Card per product is clearer when each row needs more than four cells. In React, Ark UI does not remove the dividers.
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
Use email insteadNo credit card
Anatomy
Usage
<div className="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow className="border-b-0 hover:bg-transparent">
<TableHead>Product</TableHead>
<TableHead>Category</TableHead>
<TableHead className="text-end">Price</TableHead>
<TableHead className="text-end">Stock</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{products.map((product) => (
<TableRow className="border-b-0" key={product.name}>
<TableCell className="font-medium">{product.name}</TableCell>
<TableCell>{product.category}</TableCell>
<TableCell className="text-end">{product.price}</TableCell>
<TableCell className="text-end">{product.stock}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>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.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
