ChangelogStrip
A "what's new" strip: recent releases as dated entries on one continuous hairline, each marked by a dot on the rule.
View code
<LandingSection>
<ChangelogStrip title="Changelog" action={<a href="/changelog">View all →</a>}>
<ChangelogStrip.Entry
dateTime="2026-10-28"
date="Oct 28, 2026"
title="Status pages on your own domain"
href="/changelog/status-domains"
>
Point status.yourcompany.com at Beacon and we provision the certificate, no DNS tickets.
</ChangelogStrip.Entry>
{/* …three more entries */}
</ChangelogStrip>
</LandingSection>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { ChangelogStrip } from "@sdxc/ui/landing";Renders recent releases as an ordered list on one hairline. The column count comes from the entry count (see changelogColumns); below the first grid step the list is a snapping sideways row of ~80% wide entries that scrolls inside its own box.
Composition
The parts the component publishes, each a static property of the host.
ChangelogStripChangelogStrip.EntryOne release: a dot on the rule, the date in mono, the title, and a two-line summary.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
title | RemixNode | No | Optional heading over the row, at the level of the surrounding heading scope. |
action | RemixNode | No | Optional link beside the title, such as "View all →". |
"aria-label" | string | No | Accessible name for the list when there is no visible title. |
children | RemixNode | Yes | Two or more ChangelogStrip.Entry children, newest first. |
Also accepts everything in Omit<TagProps<"div">, "title">.
ChangelogStrip.Entry
| Prop | Type | Required | Description |
|---|---|---|---|
dateTime | string | Yes | Machine-readable release date (YYYY-MM-DD), written to <time dateTime>. |
date | RemixNode | Yes | Date as the reader sees it, such as "Oct 28, 2026". |
title | RemixNode | Yes | Release title. |
href | string | No | Release page; when set, the whole entry is one link. |
children | RemixNode | No | Summary, clamped to two lines. |
Also accepts everything in Omit<TagProps<"li">, "title">.