Blog 8

Cards 180

About

Blog posts in row layout with large images on right.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Blog 8 to your project and fits it to your theme.

Code

How Blog 8 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Blog8 } from "@/components/blocks/blog8"

const demoData = {
  heading: "Blog Posts",
  description:
    "Discover the latest insights and tutorials about modern web development, UI design, and component-driven architecture.",
  posts: [
    {
      id: "post-1",
      title:
        "Building Modern UIs: A Deep Dive into Shadcn and React Components",
      summary:
        "Join us for an in-depth exploration of building modern user interfaces using shadcn/ui and React. Learn best practices and advanced techniques.",
      label: "Web Design",
      author: "Sarah Chen",
      published: "15 Feb 2024",
      url: "https://shadcnblocks.com",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
      tags: ["Web Design", "UI Development"],
    },
    {
      id: "post-2",
      title: "Mastering Tailwind CSS: From Basics to Advanced Techniques",
      summary:
        "Discover how to leverage the full power of Tailwind CSS to create beautiful, responsive websites with clean and maintainable code.",
      label: "Web Design",
      author: "Michael Park",
      published: "22 Feb 2024",
      url: "https://shadcnblocks.com",
      image: "https://cdn.21st.dev/assets/mirror/e2/e276687cf540bc1b76306090f5cb5c8da7e75540aa3699c82434199e4c022aac.svg",
      tags: ["Web Design", "CSS"],
    },
  ],
};

function Blog8Demo() {
  return <Blog8 {...demoData} />;
}

export { Blog8Demo };