A three-column grid of six post cards, each with a cover drawn in SVG, a category, title, excerpt, and author, date and read time, plus an "All posts" link.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/blog-01.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Blog01 } from '@/components/blog-01/blog-01'
export default function Page() {
return (
<main>
<Blog01 />
</main>
)
}Files
What the command adds to your project, and where.
components/blog-01/blog-01.tsxThe section. Import it into any page and render it; it fills the width of its parent.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Blog
- Blog 02An editorial front page: one featured post with a typographic cover on the left, and a dated list of the four most recent posts on the right.
- Blog 03A blog index over eighteen posts with category chips and counts, live search, six posts per page, our Pagination and an empty state with a way back.
- Blog 04An article page: reading-progress bar, byline, a sticky table of contents that follows the current heading, pull quote, copyable code block, numbered footnotes and a next-article card.