Shadcn Blog Blocks

Browse 128+ animated blog sections built with React, Tailwind CSS and shadcn/ui. Copy & paste the code or install via the shadcn CLI.

128 blocks

Featured and grid

List with image reveal

Category tabs filter

Magazine layout

Three-up card grid with wide

Horizontally scrolling row of tall

Three-column grid with category badges

Featured post with two stacked

List with thumbnails on the right

Magazine five-up bento

Shuffling card stack

Horizontal pinned scroll

Topic board

Posts on a map

Publishing calendar

Command palette search

Filter by reading time

Sort with animated reorder

Infinite headline marquee

Breaking news ticker

Draggable card row with progress

Posts with read-progress rings

Recently read with resume

AI summary toggle

Headline index with hover previews

Split-screen hover preview

Typewriter featured post

Border beam cards

Related-posts graph

Vertical snap feed

Dark-mode index

Cards led by author rows

Index with big article counter

Category chips with counts

Filter by author avatars

Weighted tag cloud

Sticky category TOC

Feed links panel

Subscribe to topics

Complete blog index page

Developer blog index with product filters

Minimal text list with dates

Archive grouped by year

Multi-select tag pills

Search with live results

Dark featured post card

Two columns with popular sidebar

Grid with inline newsletter

Masonry cards

Posts with reading time and views

Podcast episode list

Video posts with duration overlays

Changelog-style posts

Case-study posts with metrics

Numbered top five list

Hero image posts with overlay text

Editorial with big type

Category tabs with featured pane

Single-post carousel with arrows

Cursor-following image reveal

Compact sidebar widgets

Related posts strip

Author spotlight with posts

Series and collection cards

RSS and subscribe card

Four-column compact grid

Two-column large cards

Horizontal cards with image left

Cards with overlapping avatar

Cards with category bar

Hover-lift cards with arrow

Borderless image cards with caption

Numbered card grid

Grid with wide featured tile

Alternating image left and right

Timeline rail with dates

Table-style post index

Accordion post previews

Cards with expandable excerpt

Mixed masonry with text-only cards

Sticky category headings

Posts grouped by month

Card stack carousel

Latest, popular and trending tabs

Grid with load-more button

Grid with numbered pagination

Horizontally scrolling category rows

Split list with preview pane

Grid with filter sidebar

Cards with bookmark toggle

Cards with like counts

Quote-post cards

Link-post cards

Image gallery posts

Cards with wide-cropped covers

Newspaper front page

Magazine cover story with departments

Reader feed with claps and member-only posts

Newsletter archive with issue numbers

Research paper index

Engineering blog with code thumbnails

Design journal with captioned imagery

Opinion section with columnists

Long-read feature with time estimate

Editor's picks with ribbons

Weekly digest card with five links

This week in roundup

Interview series with Q&A previews

Guest authors grid

Translated posts with language switch

Articles with listen button

Essay index with word counts

Photo essay cover

Data-journalism story cards

Product updates with version chips

Event recap posts

Local news with location tags

Company newsroom with press-release labels

Feed with sponsored post marker

Trending with rank movement

Most-read with ticking counts

Reading list saved for later

Start here curated reading path

Topic hub header with posts

Morning briefing with the gist

Hover-expanding rows with image reveal

Scroll-pinned featured post

3D tilt cards

Shadcn UI Blog Blocks, Sections & Components

Each blog block is a self-contained React component with its copy exposed as props. Copy the code, install it through the shadcn CLI, or let your AI assistant pull it in through the Chocolate MCP server. You own the code and can change anything.

FAQs