Vibes logo

Blog Post List

Blog Post List is used to display a list of blog post cards.

Installation

Run the following command

npx vibes@latest add blog-post-list

Usage

import { BlogPostList } from '@/vibes/soul/sections/blog-post-list';function Usage() {  return (    <BlogPostList blogPosts={blogPosts} />  );}const blogPosts = [  {      id: '5',      title: 'A Guide to Low-Light Houseplants',      content:      'Not all plants need bright sunlight to thrive. This guide highlights the best low-light houseplants, perfect for those darker corners of your home or office that need a touch of green.',      image: {          src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo0NGVmOWFkZC00MDc5LTRmMTAtODIyMC0zM2UwNjNkMGRjZDM=/low-light.jpeg',          alt: 'Low-Light Houseplants',      },      date: '2024-07-20',      href: '#',      author: 'Author Name',  }];

API Reference

BlogPostListProps

PropTypeDefault
className
string
blogPosts*
Streamable<BlogPost[]>
className
string
emptyStateSubtitle
Streamable<string>
emptyStateTitle
Streamable<string>
placeholderCount
number

BlogPost

PropTypeDefault
title*
string
author
string | null
content*
string
date*
string
image
{src: string; alt: string; } | null
href*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --blog-post-list-empty-state-title-font-family: var(--font-family-heading);  --blog-post-list-empty-state-subtitle-font-family: var(--font-family-body);  --blog-post-list-empty-state-title: var(--foreground);  --blog-post-list-empty-state-subtitle: var(--contrast-500);}