Shows blog posts as cards, with the first post featured across two columns. Cards reveal with a stagger and covers ease larger on hover. Each cover carries a transition name, so with Astro's router a click morphs it into the post's own cover. Give the post page the same name.
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.
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
columns
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 11.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 · newly available
Chrome 111 · Firefox 144 · Safari 18; needs view-transitions. Elsewhere: an instant swap into the post.
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/blog-grid
src/pages/index.astro
---import BlogGrid from '@/components/moonarc/pro/BlogGrid.astro';---<BlogGrid posts={posts.map((p) => ({ href: p.url, title: p.title, excerpt: p.excerpt, date: p.date, cover: { src: p.cover, alt: '' } }))} /><!-- on the post page (import PageTransition from '@/components/moonarc/PageTransition.astro'), the same name morphs the cover: --><PageTransition name={`ma-cover-${url}`} preset="morph"><img src={cover} alt="" /></PageTransition>
Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, page-transition.
Posts in order. 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.
featured
boolean
true
Feature the first post across two columns.
columns
2 | 3 | 4
3
Columns on wide screens; the featured post spans two.
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'
Gaps ×0.8 / ×1 / ×1.25 through --ma-density.
level
1 | 2
2
Heading level of the headline: 2 under another h1 (a demo, a block further down), 1 when the section opens its page (the blog index); the post titles step up with it, h3 to h2, so the outline has no gap.
locale
string
unset (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.
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.
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
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.
'%2F%3E%3Crect%20width%3D'160'%20height%3D'90'%20fill%3D'url(%23b)'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3Crect%20width%3D'160'%20height%3D'90'%20fill%3D'url(%23b)'%2F%3E%3C%2Fsvg%3E)