# Blog component 17

> Related posts blog grid with outline trending badge, centered header with "Related Post" heading, three-column responsive grid of blog cards with hover-scale images, calendar icons with dates, primary/10 border-0 category badges, line-clamp-2 titles and descriptions, author links, outlined arrow buttons with primary hover and transition-colors

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/blog-component-17).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/blog-component-17
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/blog-component-17-light-7db86c3685a4dfa9.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/blog-component-17.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/blog-component-17.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `badge`, `button`, `card`

## Files

### `src/registry/new-york/blocks/marketing-ui/blog-component/blog-component-17/page.tsx`

```tsx
import Blog from '@/registry/new-york/components/blocks/blog-component-17/blog-component-17'

const blogPosts = [
  {
    title: 'Ship Faster with a Scalable UI Architecture',
    description: 'Reduce tech debt, accelerate release cycles,  keep your product consistent you grow.',
    imageUrl: 'https://cdn.shadcnstudio.com/ss-assets/template/landing-page/ink/image-04.png',
    imageAlt: 'ship',
    date: 'May 23, 2025',
    category: 'Dev Productivity',
    author: 'Lea Potts',
    authorLink: '#',
    blogLink: '#',
    categoryLink: '#'
  },
  {
    title: 'SEO Playbook for SaaS Products That Scale',
    description: 'Turn search into compounding sign-ups with a strategy tailored for SaaS funnels.',
    imageUrl: 'https://cdn.shadcnstudio.com/ss-assets/template/landing-page/ink/image-10.png',
    imageAlt: 'Seo',
    date: 'May 15, 2025',
    category: 'SEO',
    author: 'Bella Craig',
    authorLink: '#',
    blogLink: '#',
    categoryLink: '#'
  },
  {
    title: 'Automating Product Delivery with AI Workflows',
    description: 'Replace repetitive tasks with AI-powered and give teams more time to innovate.',
    imageUrl: 'https://cdn.shadcnstudio.com/ss-assets/template/landing-page/ink/image-09.png',
    imageAlt: 'AI',
    date: 'February 28, 2025',
    category: 'AI Automation',
    author: 'Noah Ortega',
    authorLink: '#',
    blogLink: '#',
    categoryLink: '#'
  }
]

const BlogPage = () => {
  return <Blog blogPosts={blogPosts} />
}

export default BlogPage
```

### `src/registry/new-york/components/blocks/blog-component-17/blog-component-17.tsx`

```tsx
import { ArrowRightIcon, CalendarDaysIcon } from 'lucide-react'

import { Badge } from '@/registry/new-york/ui/badge'
import { Button } from '@/registry/new-york/ui/button'
import { Card, CardContent } from '@/registry/new-york/ui/card'

export type BlogPost = {
  title: string
  description: string
  imageUrl: string
  imageAlt: string
  date: string
  category: string
  author: string
  authorLink: string
  blogLink: string
  categoryLink: string
}

const Blog = ({ blogPosts }: { blogPosts: BlogPost[] }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl space-y-16 px-4 py-8 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='space-y-4'>
          <Badge variant='outline'>Trending</Badge>

          <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Related Post</h2>

          <p className='text-muted-foreground text-lg md:text-xl'>
            Expand your knowledge with these hand-picked posts.
          </p>
        </div>

        {/* Tabs and Search */}
        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
          {blogPosts.map(post => (
            <Card key={post.title} className='group h-full overflow-hidden shadow-none'>
              <CardContent className='space-y-3.5'>
                <div className='mb-6 overflow-hidden rounded-lg sm:mb-12'>
                  <a href={post.blogLink}>
                    <img
                      src={post.imageUrl}
                      alt={post.imageAlt}
                      className='h-59.5 w-full object-cover transition-transform duration-300 group-hover:scale-105'
                    />
                  </a>
                </div>
                <div className='flex items-center justify-between gap-1.5'>
                  <div className='text-muted-foreground flex items-center gap-1.5'>
                    <CalendarDaysIcon className='size-6' />
                    <span>{post.date}</span>
                  </div>
                  <a href={post.categoryLink}>
                    <Badge className='bg-primary/10 text-primary border-0 text-sm'>{post.category}</Badge>
                  </a>
                </div>
                <h3 className='line-clamp-2 text-lg font-medium md:text-xl'>
                  <a href={post.blogLink}>{post.title}</a>
                </h3>
                <p className='text-muted-foreground line-clamp-2'>{post.description}</p>
                <div className='flex items-center justify-between'>
                  <a href={post.authorLink} className='text-sm font-medium'>
                    {post.author}
                  </a>
                  <Button
                    size='icon'
                    variant='outline'
                    className='group-hover:bg-primary! group-hover:text-primary-foreground group-hover:border-primary hover:border-primary hover:bg-primary! hover:text-primary-foreground transition-colors duration-300'
                    asChild
                  >
                    <a href={post.authorLink}>
                      <ArrowRightIcon className='size-4 -rotate-45' />
                      <span className='sr-only'>Read more: {post.title}</span>
                    </a>
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Blog
```