- 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.
- 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.
- 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.
Now List
A "now" page in one section: what one person is making, reading, learning and planning at the moment. Each row has a small drawn icon, its word in the mono face and a line, and over the rows sits when the page was last updated, beside a dot that pulses like a light left on, three times as it comes in, then stays lit. Eight icons are drawn: make, read, listen, learn, plan, watch, write and travel. With block the panel is a colour block. Zero JavaScript.
Live demo
Now
What I am on this month
Making
A field guide to forms, chapter by chapter
Reading
A book on how cities are mapped
Learning
To draw letters by hand, badly so far
Planning
Issue 200, and something for it
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
Measured
JavaScript of its own
0 B
CSS 10.1 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 105 · Firefox 110 · Safari 16; needs container-units. Elsewhere: without container units the heading keeps the page's text size and the rows stay under it in one column.
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:
npx shadcn@latest add @moonarc-pro/now-list---
import NowList from '@/components/moonarc/pro/NowList.astro';
---
<NowList
eyebrow="Now"
copy="What I am up to this month, updated by hand."
updated={{ text: 'Updated 3 October 2026', date: '2026-10-03' }}
block={2}
items={[
{ label: 'Making', text: 'A pocket guide to pricing for small shops.', icon: 'make' },
{ label: 'Reading', text: 'A history of the printing press.', icon: 'read' },
{ label: 'Learning', text: 'Screen printing, badly.', icon: 'learn' },
{ label: 'Planning', text: 'Two weeks offline in the spring.', icon: 'plan' },
]}
>
<span slot="headline">What I am doing <em>right now</em></span>
</NowList>Without a key the registry answers 401 with an upgrade message.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string; text: string; icon?: Icon }[] | none | The rows, in order. label is the word in the mono face ("Making", "Reading"); text is the line. icon is one of make, read, listen, learn, plan, watch, write or travel (make when unset). |
eyebrow | string | none | A short line above the heading. Slot "eyebrow" wins. |
headline | string | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
copy | string | none | A line under the heading. |
updated | { text: string; date?: string } | none | When it was last updated: the words, and the date (YYYY-MM-DD) for the <time> element. Unset, no line and no light are drawn. |
block | 1 | 2 | 3 | 4 | 5 | none | The colour block the panel paints. Unset, the panel paints nothing and the section's own ground shows. |
level | 2 | 3 | 2 | Heading level of the section's heading. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The section's ground; a panel with a block keeps its block on every tone. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
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-now.ma-now__copy.ma-now__eyebrow.ma-now__head.ma-now__headline.ma-now__icon.ma-now__item.ma-now__label.ma-now__light.ma-now__list.ma-now__panel.ma-now__text.ma-now__updated
Slots
slot="eyebrow"slot="headline"
Reduced motion
The light stays lit and does not pulse.
With ClientRouter
CSS only; nothing to rebind.
Why it is built this way
- The light is a dot with a ring that swells and fades every 2.5 seconds, drawn on a pseudo-element so the dot itself stays put. It is hidden from assistive technology, and the date beside it is real text, in a time element when you pass the date.
- The icons are 24-unit line drawings in the text colour, one path each, so they follow the block and any theme without an image file. Every row carries its word, so an icon is never the only label.
- On a wide box the heading holds one column and the rows the other, and each row becomes icon, word and line on one line, so the words line up down the list.
- The updated line is the text you write with the date beside it. Nothing computes "days ago", so the line cannot go wrong between builds.
Replaces: Hand-written now pages (the nownownow.com format) · Personal site status sections. See the migration table.
Related
Hero Bento
ProThe first screen of one person's work, as a bento.
newly · Chrome 105 · Firefox 128 · Safari 17pointerscrollalways
How a thing is made, as steps sewn on one thread: a stitched line runs down the section and each step is a knot on it (a round number in a colour block, stitched round its edge) with a title, a line and how long it takes.
Chrome 115 · not Firefox · Safari 26scroll
Sample services
What an imaginary studio does
Brand identity
A name, a mark and the rules that hold them together, for a company that is new or has outgrown its look.
Deliverables
- Logo and mark
- Type and colour
- Guidelines
Websites
Sites designed and built by one team, from the first sketch to the code that ships.
Deliverables
- Design system
- Astro build
- Content model
Product design
Screens for an app or a tool, drawn with the people who will use them and handed over as working components.
Deliverables
- Flows
- Interface
- Components
Motion
The logo in motion, a product film, the interface itself: motion that says one thing each time.
Deliverables
- Motion identity
- Product film
- Interaction specs
What a studio or a freelancer does, as numbered rows at display size that open one at a time: each row names a service, and opens to a short text beside the list of deliverables.
newly · Chrome 131 · Firefox 143 · Safari 18.4clickhover
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