# Blog component 01

> Three-column blog grid with featured images, titles, descriptions, and read more buttons for journey and destination content

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/blog-component-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/blog-component-01-light-64ea1e7d66f65af3.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/blog-component-01.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-01.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: `button`, `card`

## Files

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

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

const blogCards = [
  {
    img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/blog/image-1.png',
    alt: 'Modern house',
    title: 'Laws of Transfer of Immovable Property',
    description:
      'Experience the charm of this lovely and cozy apartment, featuring warm decor and inviting spaces, perfect for relaxation and comfort, ideal for your next getaway.',
    blogLink: '#'
  },
  {
    img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/blog/image-2.png',
    alt: 'Traditional house',
    title: 'Thane Development Plan 2026 & Master Plan',
    description:
      'Discover a unique nook in the heart of the city, offering convenience and access to attractions. Stylishly designed, it provides a comfortable retreat.',
    blogLink: '#'
  },
  {
    img: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/blog/image-3.png',
    alt: 'Modern house with pool',
    title: 'What is a Property Sale Agreement?',
    description:
      'Welcome to this charming independent house bedroom, featuring a spacious layout and cozy furnishings. Enjoy abundant natural light and peaceful.',
    blogLink: '#'
  }
]

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

export default BlogPage
```

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

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

import { Button } from '@/registry/new-york/ui/button'
import { Card, CardContent, CardTitle, CardDescription, CardHeader } from '@/registry/new-york/ui/card'

type BlogCard = {
  img: string
  alt: string
  title: string
  description: string
  blogLink: string
}[]

const Blog = ({ blogCards }: { blogCards: BlogCard }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='mb-12 space-y-4 text-center sm:mb-16 lg:mb-24'>
          <p className='text-primary text-sm font-medium uppercase'>Blog list</p>
          <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Plan your upcoming journey.</h2>
          <p className='text-muted-foreground text-xl'>
            Explore new destinations, indulge in local cuisines, and immerse yourself in diverse cultures.
          </p>
        </div>

        <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
          {blogCards.map((item, index) => (
            <Card className='pt-0 shadow-none max-lg:last:col-span-full' key={index}>
              <CardContent className='px-0'>
                <img src={item.img} alt={item.alt} className='aspect-video h-60 w-full rounded-t-xl object-cover' />
              </CardContent>
              <CardHeader className='flex h-full flex-col justify-between gap-6'>
                <div className='space-y-3'>
                  <CardTitle className='text-xl'>
                    <a href={item.blogLink}>{item.title}</a>
                  </CardTitle>
                  <CardDescription className='text-base'>{item.description}</CardDescription>
                </div>
                <div>
                  <Button className='group rounded-lg text-base has-[>svg]:px-6' size='lg' asChild>
                    <a href={item.blogLink}>
                      Read More
                      <ArrowRightIcon className='transition-transform duration-200 group-hover:translate-x-0.5' />
                    </a>
                  </Button>
                </div>
              </CardHeader>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Blog
```