@shadcnui-blocks

A free collection of 200+ production-ready shadcn/ui blocks and 25+ extended component variants, built with Next.js, Tailwind CSS, and TypeScript. Block categories include Hero sections, pricing tables, testimonials, feature grids, and footers, all shipping with light and dark mode. No account or paywall required — copy-paste from the site. Component variants extend standard shadcn/ui defaults with more styles and sizes. Use for: pulling free, dark-mode-ready marketing and landing-page blocks into any Next.js project without a subscription or signup.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://shadcnui-blocks.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://shadcnui-blocks.com/r/registry.json

bun bunx shadcn@latest add https://shadcnui-blocks.com/r/registry.json

fetch registry curl -s https://shadcnui-blocks.com/r/registry.json

Components

60 total

Dot Pattern ui

A simple dot pattern

npx shadcn@latest add https://shadcnui-blocks.com/r/dot-pattern.json

Particles ui

A simple particles

npx shadcn@latest add https://shadcnui-blocks.com/r/particles.json

Animated Grid Pattern ui

A simple animated grid pattern

npx shadcn@latest add https://shadcnui-blocks.com/r/animated-grid-pattern.json

Marquee ui

A simple marquee

npx shadcn@latest add https://shadcnui-blocks.com/r/marquee.json

Default Accordion component

A default accordion component

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-01.json

Outline Accordion component

An outline styled accordion

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-02.json

Box Accordion component

A box styled accordion

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-03.json

Contained Accordion component

A contained accordion component

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-04.json

Box Contained Accordion component

A box-contained accordion component

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-05.json

Tabs Accordion component

A tabs-styled accordion component

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-06.json

Highlight Active Item Accordion component

An accordion that highlights the active item

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-07.json

Multiple Expanded at a time Accordion component

An accordion that allows multiple items to be expanded at once

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-08.json

Expand Icon Accordion component

An accordion with a custom expand icon

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-09.json

Icon Accordion component

An accordion with icons

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-10.json

Media Content Accordion component

An accordion with media content

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-11.json

Disabled Item Accordion component

An accordion with disabled items

npx shadcn@latest add https://shadcnui-blocks.com/r/accordion-12.json

Primary Alert component

A primary alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-01.json

Destructive Alert component

A destructive alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-02.json

Success Alert component

A success alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-03.json

Warning Alert component

A warning alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-04.json

Info Alert component

An info alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-05.json

Alert With Background component

An alert with background component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-06.json

Soft Alert component

A soft alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-07.json

Bootstrap Alert component

A bootstrap-styled alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-08.json

Callout Alert component

A callout alert component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-09.json

Alert With Actions component

An alert with actions component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-10.json

Default Alert Dialog component

A default alert dialog component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-01.json

Alert Dialog With Icon component

An alert dialog with icon component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-02.json

Destructive Alert Dialog component

A destructive alert dialog component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-03.json

Info Alert Dialog component

An info alert dialog component

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-04.json

Customized Header Alert Dialog component

An alert dialog with customized header

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-05.json

Customized Footer Alert Dialog component

An alert dialog with customized footer

npx shadcn@latest add https://shadcnui-blocks.com/r/alert-dialog-06.json

Default Avatar component

A default avatar component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-01.json

Clickable Avatar component

A clickable avatar component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-02.json

Avatar with Tooltip component

An avatar with tooltip component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-03.json

Avatar with Text component

An avatar with text component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-04.json

Avatar with Hover Card component

An avatar with hover card component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-05.json

Avatar Size component

Different sizes of avatar component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-06.json

Avatar Color component

Different colors of avatar component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-07.json

Avatar Shape component

Different shapes of avatar component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-08.json

Avatar Fallback component

Avatar with fallback component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-09.json

Avatar with Ring component

Avatar with ring component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-10.json

Avatar Status component

Avatar with status indicator component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-11.json

Avatar Group component

Group of avatars component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-12.json

Avatar Group with Max component

Group of avatars with maximum limit component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-13.json

Avatar Group with Max component

Group of avatars with maximum limit component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-14.json

Avatar Group with Max component

Group of avatars with maximum limit component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-15.json

Avatar Dropdown Menu component

An avatar dropdown menu component

npx shadcn@latest add https://shadcnui-blocks.com/r/avatar-16.json

Default Badge component

A default badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-01.json

Secondary Badge component

A secondary badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-02.json

Outline Badge component

An outline badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-03.json

Destructive Badge component

A destructive badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-04.json

Rounded Badge component

A rounded badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-05.json

Gradient Badge component

A gradient badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-06.json

Gradient Outline Badge component

A gradient outline badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-07.json

Soft Badge component

A soft badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-08.json

Status Badge component

A status badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-09.json

Badge with Image component

A badge with image component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-10.json

Badge with Icon component

A badge with icon component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-11.json

Clickable Badge component

A clickable badge component

npx shadcn@latest add https://shadcnui-blocks.com/r/badge-12.json