Shadcn Blog Blocks

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

Sort

Price

Sort

Price

Blog 3

Blog post grid with category badges and author

Shadcn Blog 4 - Blog post grid with author avatars

Blog 5

Large blog post grid with author avatars

Blog 6

Blog post grid with author and date first

Blog 8

Blog post rows with tags and large images

Shadcn Blog 11 - Blog post cards with hover image reveal

Blog 12

Blog post cards with author and read time

Blog 13

Blog post grid with category badges on images

Blog 14

Featured blog post with three post cards

Blog 16

Blog post rows with thumbnails and tag pills

Shadcn Blog 17 - Blog post list with category filter

Blog 26

Featured blog post with masthead and latest posts

Blog 27

Blog post grid with filters and load more

Shadcn Blog 28 - Blog post bento grid with featured post

Blog 31

Featured blog post grid with overlay card

Blog 32

Blog post grid in two columns with badges

Blog 33

Blog post grid in four columns with categories

Shadcn Blog 34 - Blog post cards with author footer

Blog 45

Blog post list with thumbnails and dates

Blog 48

Blog post list with categories and read time

Blog 49

Featured blog post with stacked side cards

Blog 52

Featured blog post with four-column grid

Shadcn Blog 53 - Wide featured blog post with post cards

Blog 55

Alternating blog post rows with read time

Shadcn Blog 56 - Blog post list with category column

Blog 58

Blog post titles with bylines in two columns

Shadcn Blog 59 - Blog post list with titles and dates

Blog 60

Blog post cards with category pill and arrow

Shadcn Blog 61 - Blog post title cards with author

Blog 63

Text-only blog post cards with author footer

Shadcn Blog 64 - Blog post excerpts with left border

Blog 66

Text-only blog post cards with read link

Shadcn Blog 67 - Featured blog post with text post cards

Blog 70

Bordered blog post cards with author avatars

Shadcn Blog 71 - Bordered blog post grid with read time

Blog 72

Blog post index with dates and categories

Shadcn Blog 73 - Numbered blog post list in two columns

Blog 74

Blog post grid with category pills and read links

Shadcn Blog 75 - Blog post rows with large images

Blog 2

Blog post list with dates in two columns

Blog 9

Text-only blog post cards with filled background

Shadcn Blog 10 - Blog post list with author avatars

Blog 15

Blog post cards in two columns without images

Shadcn Blog 18 - Blog post title grid with dates

Blog 81

Two bordered blog post cards with authors

Blog 82

Bordered blog post grid with authors in two columns

Blog 83

Two blog post cards with image category chips

Blog 84

Blog post grid with image category chips

Blog 85

Compact blog post cards with category chips

Shadcn Blog 86 - Blog post cards in a row of four

Blog 89

Large bordered blog post grid with authors

Blog 90

Blog post row with category pills on images

Blog 91

Blog post grid with category pills on images

Blog 92

Blog post index with category pills on images

Shadcn Blog 93 - Text-only blog post rows with read more

Blog 100

Editorial blog topic index with weighted tag cloud

Blog 101

Blog title list with hover image preview

Shadcn Blog 102 - Blog magazine layout with sidebar

Blog 117

Centered Author Profile With Topic Filter

Blog 120

Six blog post cards with read more links

Shadcn UI Blog Blocks, Sections & Components

Blog blocks preview your latest posts with titles, dates, authors, and cover images. These shadcn blog blocks sit on homepages, blog indexes, and marketing pages to send readers into your articles.

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 blog 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.

Choosing the Right Blog Section

Different goals call for different blog sections. We’ve organized our blog blocks into subgroups so you can find the right layout for your use case:

Shadcn Blog Card Grid 3 Col - Three-column card grids of blog posts.
Shadcn Blog Grid Minimal - Card grids of blog posts without cover photos.
Shadcn Blog Topics - Blog Topics layouts for landing pages, product pages, and marketing sites.
Shadcn Blog List - Text-first stacked article lists with category, title, and metadata.
Shadcn Blog Row - Blog Row layouts for landing pages, product pages, and marketing sites.
Shadcn Blog Media - Blog Media layouts for landing pages, product pages, and marketing sites.
Shadcn Blog Archive - Blog Archive layouts for landing pages, product pages, and marketing sites.
Shadcn Blog Series - Multi-part blog series laid out in order, with reading progress and publish dates.
Shadcn Blog Card Grid 2 Col - Two-column card grids of blog posts.
Shadcn Blog Author Profile - Blog Author Profile layouts for landing pages, product pages, and marketing sites.
Shadcn Blog Feature - Blog Feature layouts for landing pages, product pages, and marketing sites.
Shadcn Blog Carousel - Swipeable blog carousel and slider layouts for compact multi-item display.
Shadcn Blog Centered - Stacked posts under a centered heading.
Shadcn Blog Bento - Magazine bento grids with mixed card spans.
Shadcn Blog Card Grid 4 Col - Four-column card grids of blog posts.
Shadcn Blog Alternating - Rows that swap the image from one side to the other.

FAQs

What is a Shadcn Blog section?

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

How do I install a Shadcnblocks Blog 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/blog1 - See the installation docs for setting up shadcn/ui if your project isn't using it already.

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

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

Do Shadcnblocks Blog blocks work with Radix UI, Base UI and React Aria?

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

Can I customize Shadcnblocks Blog 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 Blog 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 Blog section?

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

Shadcn Blog Blocks

Categories

Shadcn UI Blog Blocks, Sections & Components

Choosing the Right Blog Section

FAQs