Blog blocks for every framework.

100 sections for one publication: post grids, featured stories, archives, series, topic indexes, search, subscribe forms, comments, author pages and reading tools. The gallery sorts them into 14 groups: Card grids, Featured story, Post lists, Audio, video, photos, Archives by date, Topics and indexes, Article parts, Story formats, Tutorials and series, Authors and staff, Reader feedback, Subscribe and alerts, Reading tools, Stats and drafts.

For a grid of posts use Framed Cards Blog, and for a lead story Cover Story Blog or Featured Post Blog. For the back catalogue use Nested Accordion Archive Blog or Pagination Blog, and for search Search Grid Blog. In an article use Scrolling Article Table of Contents Blog, Post Footer Blog and Comment Thread Blog, and to follow along Inline Subscribe Newsletter Blog.

No. The covers are text, or small patterns and windows drawn in markup, so no image files are needed. The posts are typed data in each file, and there is no CMS, feed or MDX renderer. You supply the posts and keep your own article rendering.

The blog blocks lay out the publication around the posts: lists, grids, archives, indexes and follow tools. The Article parts group covers the pieces of one post, such as the breadcrumb, summary, contents, footnotes, snippets and footer, which you place around the body your CMS or MDX renders.

The post-list blocks, such as the cards, the search grid and the pagination, keep a POSTS array of objects matching a small Post interface: title, dek, author, category, an ISO date, reading time in minutes and an href. Map your CMS or MDX front matter into that shape on the server and pass it in, so the cards, rows and counts render from your posts. Dates are plain ISO text, never computed from today.

Pagination Blog gives every page number a real address (?page=2 and so on) while the click swaps four rows in place, and a polite line reads "Showing 5–8 of 12". For a long archive read the page from the search params on the server, fetch just that slice, and keep the pager's links as they are.

Search Grid Blog filters its own POSTS array in the browser: the title or dek must contain the typed words, ignoring case and accents, and the matches are marked. The / key focuses the field and Escape clears it. For a large blog send the query to your search service and render its results in the same cells.

Inline Subscribe Newsletter Blog checks the address and then shows the joined state in the page, with no network call. Put your mailing-list request in its submit handler, after the address check passes and before the joined state is set, and show any server error in the message line that the block always keeps in place.

Comment Thread Blog checks the Textarea for an empty or too short comment and then adds it to the end of the thread marked "You", in the page only. Save the comment through your API in that handler and load the thread from your database. The replies are nested in a Collapsible, so keep that shape for threaded data.

Post Footer Blog keeps the neighbours in two PREVIOUS and NEXT objects with a title and href. Set them from your post list, and the two cells and the arrow-key shortcuts follow them. The Copy link button copies the POST_URL constant, so set that to the post's address too.

This page lists 100 of the category's 100 blog blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The blog blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/blog-accordion.json). The other bases are one picker away from /blog-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/blog-accordion.json for Single Open Accordion Blog. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Single Open Accordion Blog brings Accordion, Avatar, Badge and Guides, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of blog block, led by post lists (12), card grids (10), article parts (10) and topics and indexes (9), and sort by popular or name. A good first look: Single Open Accordion Blog, Announcement Blog and Nested Accordion Archive Blog. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a blog block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the post layouts, finding posts and inside a post kinds.

Open its page and use the full-screen viewer (/view/blog/accordion) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each blog block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the blog blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 blog blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a blog block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "blog"` to search_blocks to search only the 100 blog blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "blog", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.