Kanban Board Changelog
A kanban-style changelog laid out as three side-by-side columns, Features, Fixes, and Improvements, each with a count badge in its header and a stack of cards below. Each card can optionally show a small version tag for which release it shipped in. Good for a single-cycle release summary rather than a long chronological history.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/kanban-board-changelog.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog21.tsx instead.
Usage
The file also exports changelog21Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Changelog21, changelog21Demo } from "@/components/blocks/changelog/changelog21"; export default function Page() { return <Changelog21 {...changelog21Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "What shipped this cycle" | Section heading. |
| description | string | "Grouped by type, at a glance." | Section intro text. |
| features | Changelog21Card[] | [] | Cards in the Features column. |
| fixes | Changelog21Card[] | [] | Cards in the Fixes column. |
| improvements | Changelog21Card[] | [] | Cards in the Improvements column. |
| className | string | none | Extra classes for the outer section element. |
Types
type Changelog21Card = { id: string; text: string; version?: string; };
Behavior notes
- Purely presentational: no interactive state or backend calls, no drag-and-drop between columns despite the kanban visual metaphor. Column contents are fixed, caller-supplied arrays.
- Each column's header icon (Sparkles/Wrench/TrendingUp) is hardcoded per column position, not passed in as a per-card icon prop, since the three columns are a fixed structural part of this block rather than a dynamic list.
- The count badge in each column header always reflects that column's actual array length, including zero; an empty column still renders its header and count, just with no cards beneath it.
- version is optional per card; a card without one still renders its change text with no tag line beneath it.
More Changelog Blocks
View all →Split Milestone Changelog
Two-column release entries pairing milestone context with highlights and metrics.
Changelog Release Feed
Release feed cards with aligned change-type labels and an optional CTA per card.
Grouped Changelog Board
Releases grouped under bold month headings with aligned version and description columns.
Milestone Changelog Timeline
Vertical timeline of releases with a connecting line, version badges, and tone-coded change types.
Minimal Text Changelog
Ultra-plain, text-only changelog with no badges, cards, or borders.
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.