A horizontal row of post cards with native scroll snapping, previous and next buttons, a position counter, a progress meter and fading edges.
Latest stories
Case studies, incident reviews and the occasional strong opinion, written by the people who build Northwind.
npx shadcn@latest add https://hyperblur.dev/r/blog-carousel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-carousel.tsx.
import { BlogCarousel } from "@/components/hyperblur/blog-carousel"
<BlogCarousel title="Latest from the blog" accent="#f5a524" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Latest stories" | Small mono label above the title. |
| title | string | "Fresh from the team" | Section heading. |
| subtitle | string | "Case studies, incident reviews..." | Supporting text under the heading. |
| posts | { title: string; category: string; author: string; date: string; readTime: string; href: string; cover?: string }[] | 7 sample posts | Cards in the carousel. `cover` takes any CSS background; without it a gradient cover with the card number is drawn. |
| cta | { label: string; href: string } | null | { label: "Browse the archive", href: "#" } | Final card linking to the full archive. Pass null to remove it. |
| accent | string | "#f5a524" | Accent for the meter, buttons and hover glow. |
| label | string | "Latest stories" | Accessible name of the carousel region. |