Shadcn Bento Blocks

Browse 53+ Shadcn UI Bento sections built with React, Tailwind CSS and shadcn/ui. Copy & paste the code or install via the shadcn CLI.

Shadcn Bento 2 - Team collaboration bento with animated stats

Bento 2

Team collaboration bento with animated stats

Shadcn Bento 3 - Four-tile value proposition bento

Bento 3

Four-tile value proposition bento

Shadcn Bento 4 - Dark analytics bento with playhead chart

Bento 4

Dark analytics bento with playhead chart

Shadcn Bento 5 - Healthcare feature bento grid

Bento 5

Healthcare feature bento grid

Shadcn Bento 6 - Dark enterprise bento with animated SVG tiles

Bento 6

Dark enterprise bento with animated SVG tiles

Shadcn Bento 7 - Light bento with AI chat and model picker

Bento 7

Light bento with AI chat and model picker

Shadcn Bento 8 - Two-by-two bento with workflow and budget UI

Bento 8

Two-by-two bento with workflow and budget UI

Shadcn Bento 9 - Dark chatbot bento with conversation tiles

Bento 9

Dark chatbot bento with conversation tiles

Shadcn Bento 10 - Analytics bento with wave chart and layered cards

Bento 10

Analytics bento with wave chart and layered cards

Shadcn Bento 11 - Asymmetric six-column health tech bento

Bento 11

Asymmetric six-column health tech bento

Shadcn Bento 12 - Inverted caption bento with icon flow diagram

Bento 12

Inverted caption bento with icon flow diagram

Shadcn Bento 13 - Borderless eight-column mosaic with menu UI

Bento 13

Borderless eight-column mosaic with menu UI

Shadcn Bento 14 - Dark voice AI bento with waveform animation

Bento 14

Dark voice AI bento with waveform animation

Shadcn Bento 15 - Dark voice studio bento with emotion controls

Bento 15

Dark voice studio bento with emotion controls

Shadcn Bento 16 - Dark voice platform bento with team workspace

Bento 16

Dark voice platform bento with team workspace

Shadcn Bento 17 - Dark bento with voice preview comparison

Bento 17

Dark bento with voice preview comparison

Shadcn Bento 18 - Light four-tile bento with mixed aspect ratios

Bento 18

Light four-tile bento with mixed aspect ratios

Shadcn Bento 19 - Three-column masonry bento with integration pills

Bento 19

Three-column masonry bento with integration pills

Shadcn Bento 20 - Hero split bento with recommendation engine feature

Bento 20

Hero split bento with recommendation engine feature

Shadcn Bento 21 - Light health bento with animated tiles

Bento 21

Light health bento with animated tiles

Shadcn Bento 22 - Dark analytics bento with photo tiles

Bento 22

Dark analytics bento with photo tiles

Shadcn Bento 23 - Dark alternating bento with flipped captions

Bento 23

Dark alternating bento with flipped captions

Shadcn Bento 24 - Dark staggered two-column bento

Bento 24

Dark staggered two-column bento

Shadcn Bento 25 - Dark wide-narrow bento mosaic

Bento 25

Dark wide-narrow bento mosaic

Shadcn Bento 26 - Light feature bento with icon captions

Bento 26

Light feature bento with icon captions

Shadcn Bento 27 - Light feature bento with mixed caption order

Bento 27

Light feature bento with mixed caption order

Shadcn Bento 28 - Light performance bento with icon rows

Bento 28

Light performance bento with icon rows

Shadcn Bento 29 - Light asymmetric feature bento grid

Bento 29

Light asymmetric feature bento grid

Shadcn Bento 30 - Healthcare bento with stat counters

Bento 30

Healthcare bento with stat counters

Shadcn Bento 31 - Healthcare bento with report tiles

Bento 31

Healthcare bento with report tiles

Shadcn Bento 32 - Captionless product bento mosaic

Bento 32

Captionless product bento mosaic

Shadcn Bento 33 - Complex pricing and promo bento

Bento 33

Complex pricing and promo bento

Shadcn Bento 34 - Investigation services bento collage

Bento 34

Investigation services bento collage

Shadcn Bento 35 - Dark headphone product bento

Bento 35

Dark headphone product bento

Shadcn Bento 36 - Dark editorial product bento

Bento 36

Dark editorial product bento

Shadcn Bento 37 - Dark split showcase bento

Bento 37

Dark split showcase bento

Shadcn Bento 38 - Editorial fashion bento collage

Bento 38

Editorial fashion bento collage

Shadcn Bento 39 - Analytics dashboard bento with charts

Bento 39

Analytics dashboard bento with charts

Shadcn Bento 40 - AI voice bento with keyboard and auth

Bento 40

AI voice bento with keyboard and auth

Shadcn Bento 41 - Developer productivity bento with sidebar CTA

Bento 41

Developer productivity bento with sidebar CTA

Shadcn Bento 42 - Task management feature bento grid

Bento 42

Task management feature bento grid

Shadcn Bento 43 - AI platform bento with integration hub

Bento 43

AI platform bento with integration hub

Shadcn Bento 44 - Mobile collaboration bento with world map

Bento 44

Mobile collaboration bento with world map

Shadcn Bento 45 - SaaS fintech bento with trading widget

Bento 45

SaaS fintech bento with trading widget

Shadcn Bento 46 - AI chat and data pipeline bento

Bento 46

AI chat and data pipeline bento

Shadcn Bento 47 - Labeled AI feature bento grid

Bento 47

Labeled AI feature bento grid

Shadcn Bento 48 - Light feature bento with UI screenshots

Bento 48

Light feature bento with UI screenshots

Shadcn Bento 49 - AI analytics bento with radial chart

Bento 49

AI analytics bento with radial chart

Shadcn Bento 50 - Asymmetric light marketing bento

Bento 50

Asymmetric light marketing bento

Shadcn Bento 51 - Six-card analytics feature bento

Bento 51

Six-card analytics feature bento

Shadcn Bento 52 - Compact dark feature bento

Bento 52

Compact dark feature bento

Shadcn Bento 53 - Web3 developer bento with marquees

Bento 53

Web3 developer bento with marquees

Shadcn Bento 54 - Enterprise finance bento with timeline

Bento 54

Enterprise finance bento with timeline

Shadcn UI Bento Blocks, Sections & Components

Bento blocks are dedicated sections of a webpage focused on bento content. They appear on landing pages, product pages, and marketing sites as key elements that communicate value and drive user engagement.

Each block is a self-contained React component which you can copy/paste the code or install via the shadcn CLI. You own the code and can modify however you like, or us AI and LLMS to quickly change the design.

Our bento blocks combine headlines, supporting text, images, icons, CTA buttons, and responsive layouts. Each block is designed with clear visual hierarchy and consistent spacing to integrate seamlessly into any page structure.

FAQs

What is a Shadcn Bento section?

A shadcn Bento section is a React block for a marketing page. Shadcnblocks Bento sections are built with Tailwind and shadcn/ui.

How do I install a Shadcnblocks Bento block?

Two ways. Copy and paste the code from the block page (in the code view), or install with the shadcn CLI. For example to install with the CLI run npx shadcn add @shadcnblocks/bento2 - See the installation docs for setting up shadcn/ui if your project isn't using it already.

Can I use Shadcnblocks Bento sections in Next.js or Astro?

Yes. Shadcnblocks work with any React project. That includes Next.js, Astro, Remix, and Vite.

Do Shadcnblocks Bento blocks work with Radix UI and Base UI?

Yes. Our blocks support both Base UI and Radix UI. They will use whatever primitive library you have defined in your project's components.json. You can find more info at Base UI or Radix UI .

Can I customize Shadcnblocks Bento sections?

Yes. You can customize every aspect of the code. Shadcnblocks are downloaded as components that live in your codebase (not npm modules), so editing the code is just like your own code.

How does theming work on Shadcnblocks Bento components?

Our blocks use shadcn/ui theme variables in Tailwind CSS. CSS variables cover light mode, dark mode, and the rest of the shadcn design tokens. You can install any theme from our Shadcn Themes page.

How do I choose the right Shadcn Bento section?

Use the subgroup list above. Start from the layout you already have assets for, then change the copy and the image.