A light blog index with six topic tiles, each with its own color, floating shape and post count, followed by a dark featured post strip with a zooming cover.
The Lattice blog
Three hundred and sixty six posts from the people building Lattice, sorted into the shelves our readers use most.
A candid look at moving 2.3 billion records to a new replication model without a single minute of planned downtime.
npx shadcn@latest add https://hyperblur.dev/r/blog-category-tiles.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-category-tiles.tsx.
import { BlogCategoryTiles } from "@/components/hyperblur/blog-category-tiles"
<BlogCategoryTiles title="Browse by topic" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The Lattice blog" | Small label above the title. |
| title | string | "Browse by topic" | Section heading. |
| subtitle | string | "Three hundred and sixty six posts..." | Supporting text beside the heading. |
| categories | { name: string; count: number; description: string; href: string; colors?: [string, string]; shape?: "circle" | "arc" | "stack" | "wave" | "grid" | "spark" }[] | 6 sample categories | Tiles in the grid. `colors` is [shape color, glow color]. |
| featured | { label: string; title: string; excerpt: string; author: string; role: string; date: string; readTime: string; href: string; cover?: string } | null | sample post | Featured post strip under the grid. `cover` takes any CSS background. Pass null to hide. |
| accent | string | "#2f7bff" | Accent for the eyebrow, featured label and focus rings. |
| onCategoryClick | (category: BlogCategoryTile, index: number) => void | Called when a tile is clicked, before navigation. |