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.2.0 (unreleased): the logo
    • The site wears its logo kit: the mark in the header and the footer, and the same drawing on the share cards, the favicons and the home screen icon.
  2. 0.2.0 (unreleased): the site measures before it prints, and an About page
    • The live site printed "not measured" on every share card and readout, and counted all 102 primitives as zero bytes: its production build ran without the budget report.
    • Claims about other libraries name their source or state our measurement, with versions and browsers, or are gone.
  3. 0.2.0 (unreleased): the library is Moonarc
    • The library is called Moonarc and lives at moonarc.dev.
    • moonarc@0.0.1 on npm is a name-claiming placeholder.

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.4 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, version, items, href? }[]noneNewest first.
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.

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__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

The logo

The site wears its logo kit: the mark in the header and the footer, and the same drawing on the share cards, the favicons and the home screen icon.

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