Home Blocks Patterns Illustrations Me SwiftUI

shadcn/ui Bento Grids

Bento grids for landing pages, built with shadcn/ui and Tailwind CSS. Copy the prompt or add them with the shadcn CLI.

Browse

Categories

Hero Content Feature Call to Action Bento grids Lists Testimonials

All blocks45 New20

Hero15 Content13 Feature6 Call to Action2 Bento grids6 Lists2 Testimonials1

Bento grids 01. Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.

Bento grids 01. Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.

Bento grids 02. A row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short description and a link.

Bento grids 02. A row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short description and a link.

Bento grids 03. A product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.

Bento grids 03. A product grid with a tall featured item in the center, four smaller items around it, category badges, prices and names.

Bento grids 04. Two stacked cards with a two-tone title, a paragraph and a pill button beside a product photo surrounded by short feature callouts on a faint grid.

Bento grids 04. Two stacked cards with a two-tone title, a paragraph and a pill button beside a product photo surrounded by short feature callouts on a faint grid.

Bento grids 05. A mosaic of rounded tiles that mixes photos with two short text tiles, one with a detail photo at its base and one wide photo as the closing tile.

Bento grids 05. A mosaic of rounded tiles that mixes photos with two short text tiles, one with a detail photo at its base and one wide photo as the closing tile.