What is around a place to stay, by how a guest gets there: a group a way (on foot, by bike, by car, by boat), each place a row with its name, a line about it and the minutes it takes, and a bar drawn to scale against the farthest place of its group, so the near ones read near at a glance. A place can link to a map. Zero JavaScript.
Each bar is the time against the farthest place of its group.
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
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 9.6 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
every browser. Elsewhere: nothing to fall back from.
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/nearby-list---
import NearbyList from '@/components/moonarc/pro/NearbyList.astro';
---
<NearbyList
headline="Around the house"
groups={[
{ name: 'On foot', places: [{ name: 'The beach', text: 'Sand, and a café that opens at eight', minutes: 10 }, { name: 'The village', minutes: 18 }] },
{ name: 'By car', places: [{ name: 'The airport', minutes: 45 }] },
]}
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | none | The heading. Slot "headline" wins and may hold an <em>. |
eyebrow | string | none | A short line above the heading. |
copy | string | none | A line under the heading. |
groups | { name; places: { name; text?; minutes; href? }[] }[] | none | The ways of getting there and their places; minutes is a number, the bar is drawn from it. |
unit | string | '{n} min' | How a time is written. |
level | 1 | 2 | 3 | 2 | Heading level of the heading; each group is one below. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The section's ground. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
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.
.ma-nearby.ma-nearby__bar.ma-nearby__copy.ma-nearby__eyebrow.ma-nearby__groups.ma-nearby__head.ma-nearby__headline.ma-nearby__inner.ma-nearby__list.ma-nearby__name.ma-nearby__place.ma-nearby__text.ma-nearby__time.ma-nearby__title.ma-nearby__words
slot="headline"
The groups arrive at once.
ClientRouterCSS and Reveal.
Replaces: Local area guides. See the migration table.
What a guest agrees to before they come, set out to be read: the arrival and departure times large, the house rules as a list where each answer is a word with a mark that repeats it in shape (a tick, a cross), what the stay includes, and the policies in a sentence or two each: cancelling, a deposit, a late arrival.
Where a service runs: the world in dots with each region pinned and pulsing in turn, a chip at each pin with its code and the latency measured there, and under the map the same regions as a list (name, code, figure), so a reader who cannot see the map, or reads on a narrow screen where the chips would crowd, loses nothing.
Where to find a studio, a shop or a counter, as one card in a colour block: a drawn map with a pin, the address with a directions link, the opening hours for the week, the ways to get in touch, and above them a live line that says whether it is open now and until when (or when it opens next), with the time where the place is.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown