Blog Post Carousel
Installation
Run the following command
npx vibes@latest add blog-post-carouselUsage
import { BlogPostCarousel } from '@/vibes/soul/sections/blog-post-carousel';function Usage() { return ( <BlogPostCarousel blogPosts={posts} emptyStateSubtitle="Check back later for new content." emptyStateTitle="No posts found" /> );}const posts = [ { 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
BlogPostCarouselProps
| Prop | Type | Default |
|---|---|---|
className | string | |
blogPosts* | ||
scrollbarLabel | string | |
previousLabel | string | |
nextLabel | string | |
placeholderCount | number | |
emptyStateTitle | Streamable<string> | |
emptyStateSubtitle | Streamable<string> | |
hideOverflow | boolean | true |
BlogPost
| Prop | Type | Default |
|---|---|---|
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-carousel-empty-title: var(--foreground); --blog-post-carousel-empty-subtitle: var(--contrast-500);}