Skip to content

Components / Sections

Changelog

Lists dated releases in a hairline list. Each entry reveals as it is reached, and the newest version catches a shine. Every entry carries its date, so readers can check how often you ship.

Live demo

  1. 0.1.2 (unreleased): Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections
    • Endpoint, a template for a product with an HTTP API: a console on the home page that sends a request and streams the response back with its status, its time and its region, an API reference written at build from your OpenAPI document, a quickstart and four guides, usage pricing with a slider, a status page, the regions on a map, a changelog with a feed, search and a contact page for sales.
    • Six Pro sections for it: HeroRequest, ApiReference, RegionsMap, StatusBoard, QuickstartSteps and PricingUsage.
  2. 0.1.1: this site in Plus Jakarta Sans and JetBrains Mono
    • This site sets its text in Plus Jakarta Sans and its code in JetBrains Mono, where it used Inter and Geist Mono, and its share cards are drawn in the same two faces.
    • On /theme/, the editorial and technical pairings now set their body text in Plus Jakarta Sans and the technical headings in JetBrains Mono, and the CSS you copy names those fonts.
  3. 0.1.1: the terms, privacy and refunds, checked against Indonesian law
    • The terms, the privacy policy and the refund policy were read against Indonesia's consumer protection, personal data and e-commerce law, and changed where they fell short.
    • Terms.

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Variants · each row writes the attribute the prop writes; the section's own CSS answers

tone
density
align

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 10.9 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 120 · Firefox 49 · Safari 14; needs bg-clip-text.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal
npx shadcn@latest add @moonarc-pro/changelog-section
src/pages/index.astro
---
import ChangelogSection from '@/components/moonarc/pro/ChangelogSection.astro';
---
<ChangelogSection headline="What shipped" releases={[
  { date: '2026-03-02', version: '1.4.0', items: ['Dark mode for every chart', 'CSV export', 'Search that ignores accents'] },
  { date: '2026-02-09', version: '1.3.0', items: ['Team workspaces'] },
]} />

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, shiny-text.

Props

PropTypeDefaultDescription
releases{ date: string | Date, version, items, href?, excerpt?, id? }[]noneNewest first. id is the release's anchor on the page (v2-4-0), for a link to it from elsewhere. A string date prints as given and is the datetime; a Date (a collection's z.coerce.date()) prints through Intl.DateTimeFormat in UTC, so the day is the one the file names, and the datetime is that day in ISO form. excerpt is a short block of machine text under the items (a run, a command and its output), kept as written in the monospace face.
headlinestringnoneSection heading.
tone'surface' | 'muted' | 'ink' | 'brand'unset (paints nothing)The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand.
density'compact' | 'cozy' | 'roomy''cozy'Block padding and the release rows ×0.8 / ×1 / ×1.25 through --ma-density.
align'start' | 'center''start'Heading alignment.
linkLabelstring'Release notes'Text of a release's link, shown when the release has an href; screen readers hear the version after it.
level1 | 22Heading level of the headline: 2 under another h1 (a demo, a block further down), 1 when the section opens its page (a changelog page).
localestringunset (the runtime's)Intl locale a Date prints in.
dateStyle'full' | 'long' | 'medium' | 'short''medium'Intl date style of a Date (medium: Mar 2, 2026). A string date prints as given.
shinebooleantrueThe shine that sweeps the newest version. false prints it plain, and nothing in the section loops.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-changelog.ma-changelog__aside.ma-changelog__copy.ma-changelog__excerpt.ma-changelog__eyebrow.ma-changelog__head.ma-changelog__headline.ma-changelog__items.ma-changelog__link.ma-changelog__list.ma-changelog__release.ma-changelog__when

Slots

slot="eyebrow"slot="headline"slot="copy"slot="aside"

Reduced motion

Entries fade in; no shine.

With ClientRouter

Inherits Reveal; nothing to rebind.

Why it is built this way

Replaces: Changelog sections (Tailwind Plus). See the migration table.

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

Shiny Text

Text

A highlight sweeps across the text every few seconds.

every browseralways
Release

Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections

Endpoint, a template for a product with an HTTP API: a console on the home page that sends a request and streams the response back with its status, its time and its region, an API reference written at build from your OpenAPI document, a quickstart and four guides, usage pricing with a slider, a status page, the regions on a map, a changelog with a feed, search and a contact page for sales.

Blog Grid

Pro

Shows blog posts as cards, with the first post featured across two columns.

newly · Chrome 111 · Firefox 144 · Safari 18scrollhoverclick

Steps / Timeline

Pro

A vertical timeline: the line draws itself down the page in step with the scroll, each step revealing from the line's side as it is reached, markers numbered or dated.

Chrome 115 · not Firefox · Safari 26scroll

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown