Changelog and roadmap

What shipped and what comes next, in six layouts: a release timeline, roadmap columns, a release card with picture, a filterable list, feature voting and a subscribe panel.

6 variants

Switch category

Release timeline

Version and date stay in view while the notes scroll, changes tagged by type.

Open in Studio

Installv1.0.0

aiw add @ai-website/changelog

Brings along utils, kit, icon, section, button, reveal

Usage

<Changelog variant="timeline" releases={[{ version, date, dateTime, title, description, media, changes }]} />

Source

Roadmap columns

Planned, in progress and done as columns, on the phone one column behind a switch.

Open in Studio

Installv1.0.0

aiw add @ai-website/changelog

Brings along utils, kit, icon, section, button, reveal

Usage

<Changelog variant="roadmap" roadmap={[{ status, title, description, tag, eta }]} />

Source

Release card with picture

The latest release large with a screen and highlights, earlier ones as a list beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/changelog

Brings along utils, kit, icon, section, button, reveal

Usage

<Changelog variant="release-card" releases={[{ version, date, title, media, changes, href }, …]} />

Source

Compact list

One line per change with date and version, filterable by type.

Open in Studio

Installv1.0.0

aiw add @ai-website/changelog

Brings along utils, kit, icon, section, button, reveal

Usage

<Changelog variant="compact" releases={[…]} />

Source

Feature voting

Requests with upvotes, sorted by votes or date, and a field to add an idea.

Open in Studio

Installv1.0.0

aiw add @ai-website/changelog

Brings along utils, kit, icon, section, button, reveal

Usage

<Changelog variant="voting" requests={[{ id, title, description, votes, status, comments }]} onVote={(id, voted) => …} />

Source

Latest with subscribe

The version number as a large figure, the notes beside it and an email field for updates.

Open in Studio

Details

What Changelog and roadmap brings along, read from the registry and the source.

Area: Marketing
Variants: 6
Version: 1.0.0 · since 1.0.0
File: components/ui/changelog.tsx
Brings along: utilskiticonsectionbuttonreveal
npm packages: None
Languages: English and German, 31 texts of its own
Studio: All 6 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ChangelogProps interface from components/ui/changelog.tsx, with the comments from the code.

variantoptional
ChangelogVariant
timelineroadmaprelease-cardcompactvotingsubscribe
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
releasesoptional
ChangelogRelease[]
timeline, release-card, compact, subscribe. Newest first.
roadmapoptional
RoadmapItem[]
roadmap
requestsoptional
FeatureRequest[]
voting
onVoteoptional
(id: string, voted: boolean) => void
voting: called on every vote change
onSubscribeoptional
(email: string) => void
subscribe: called with the email address

Built-in texts

Changelog and roadmap writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 31 texts

Key	English	German
new	English New	German Neu
improved	English Improved	German Verbessert
fixed	English Fixed	German Behoben
security	English Security	German Sicherheit
all	English All	German Alle
planned	English Planned	German Geplant
progress	English In progress	German In Arbeit
done	English Done	German Fertig
open	English Open	German Offen
readMore	English Read the release notes	German Versionshinweise lesen
earlier	English Earlier releases	German Frühere Versionen
latest	English Latest release	German Neueste Version
vote	English Vote for	German Stimme geben für
voted	English Remove vote for	German Stimme zurückziehen für
top	English Top	German Beliebt
newest	English Newest	German Neueste
votes	English votes	German Stimmen
comments	English comments	German Kommentare
suggest	English Suggest a feature	German Funktion vorschlagen
suggestPh	English What would help you?	German Was würde dir helfen?
add	English Add	German Hinzufügen
added	English Added. Thanks for the idea.	German Hinzugefügt. Danke für die Idee.
email	English Email address	German E-Mail-Adresse
emailPh	English you@company.com	German du@firma.de
subscribe	English Subscribe	German Abonnieren
subscribed	English You are on the list. The next update lands in your inbox.	German Du stehst auf der Liste. Das nächste Update kommt in dein Postfach.
invalid	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
filter	English Filter by type	German Nach Art filtern
roadmap	English Roadmap	German Roadmap
items	English items	German Einträge
changes	English changes	German Änderungen

Read from the source of the component.

Changelog and roadmap handles the keys Arrow left, Arrow right and Space itself.
Sets aria-controls, aria-describedby, aria-invalid, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles group, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 9 places in the code switch motion off then.

Frequent questions

How do I install Changelog and roadmap?

With aiw add @ai-website/changelog. The command puts components/ui/changelog.tsx into your project, the code is yours from then on. It brings along icon, section, button and reveal. It needs no further npm packages.

Which variants does Changelog and roadmap have?

6 variants, Release timeline, Roadmap columns, Release card with picture, Compact list, Feature voting and Latest with subscribe. You pick one with the variant prop, for example variant="roadmap".

Can I translate the texts of Changelog and roadmap?

Yes. Changelog and roadmap carries 31 texts of its own in English and German, such as “New”, “Improved” and “Fixed”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Changelog and roadmap?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Changelog and roadmap with aiw_components and install it with aiw_add @ai-website/changelog. Name the variant in your prompt, for example variant="timeline", and the assistant writes your content straight into the props.

Can I adjust Changelog and roadmap without code?

Yes, in the Studio. All 6 variants are editable there, texts, lists and switches. The Studio writes the matching Changelog code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Changelog and roadmap on a page.