Content & Dashboard
Blog Index Grid with Category Filter
Client-filtered blog index grid driven by a category pill row built from the posts data.
$ velocityx add blog-index-grid
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Blog Index Grid with Category Filter →
Needs a licence key —
subscribe here, then
velocityx loginonce.
The JSON-driven brand-swap architecture
How every fork ports with a config edit, not an Astro rewrite.
16 Oct 2026 · 9 min readWhy the home page stays hand-built per brand
The one deliberate exception to the JSON-swap promise.
12 Oct 2026 · 5 min readSpin-up hardening: the fork-scrub checklist
Five issues that made the first live port not one-shot.
7 Oct 2026 · 7 min readFour background modes, never a fifth
Plain, gradient, shader group, reversed — and nothing else.
2 Oct 2026 · 4 min readCollapsing three shell widths into one
Why .v-wide and .v-focus are now aliases of the same 1640px token.
26 Sept 2026 · 6 min readProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| posts | { id, href, title, excerpt, category, coverSrc, date, readTimeMins }[] | No | DEFAULT_POSTS | |
| locale | string, | No | 'en-AU' | |
| dateFormatter | (date) => string | Yes | overrides Intl.DateTimeFormat | |
| headingLevel | 1-6, | No | 3 | heading level used for each post title |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/blog-index-grid/BlogIndexGrid.jsxUsing the Blog Index Grid with Category Filter component
Install it with velocityx add blog-index-grid.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Content & Dashboard.
Month calendar grid with prev/next navigation, locale-aware weekday/month labels via Intl, and per-day event dots.
reactStyled pre/code block with a filename bar and a copy button with a real success state, no syntax highlighter bundled.
reactShare-to-platform link row (X, LinkedIn, Facebook, Email) plus a copy-link button with a real success state.
reactKPI tile with a trend arrow and a hand-drawn inline SVG sparkline computed from a numbers array, no chart library.
react