npx astro add moonarc
pnpm astro add moonarc
npx shadcn@latest add …/r/tabs.json
Tabs
UITabs with an indicator that slides to the selected one and panels that fade in.
every browserclick
Schedule Days
A programme by day: a row of day chips (radio buttons, each a weekday over its date in a colour block) picks the day, and under it the day's sessions in order, with the time in the mono face, the title, who leads it, the stage as a chip in the stage's own colour and the kind of session beside it. A session can carry an id, so a lineup card links straight to it and it is marked when it is the target; one small script makes such a link pick the session's day, whose panel is hidden until then.
Live demo
Schedule
Three days, one hall
Fri14 May
Doors and badges from 09:30
10:00–10:30
Opening
10:30–11:15
Letters that move
Type designer
12:15–13:30
Lunch
14:00–16:00
Drawing with code
Illustrator
Sat15 May
The party is in the garden from 19:00
10:00–10:45
Fast pages
Web engineer
13:30–15:30
Motion with manners
Motion designer
16:00–16:45
Everyone reads
Accessibility lead
Sun16 May
A shorter day, done by 16:00
10:30–11:15
Words on screens
Writer
11:30–13:00
Light for products
Photographer
15:15–16:00
Closing
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
419 B raw
309 B gzip.
Uses the shared runtime (1.9 kB raw, once per site). With those included: 2.1 kB raw.
CSS 12.3 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 105 · Firefox 121 · Safari 15.4; needs has. Elsewhere: every day's sessions show one under another, each under its own date.
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/schedule-days---
import ScheduleDays from '@/components/moonarc/pro/ScheduleDays.astro';
---
<ScheduleDays
eyebrow="Schedule"
stages={{ 'Main stage': 1, 'Hall B': 2 }}
days={[
{ label: 'Fri', date: '14 May', sessions: [
{ start: '10:00', end: '10:30', title: 'Opening', stage: 'Main stage', kind: 'Talk' },
{ id: 'letters', start: '10:30', end: '11:15', title: 'Letters that move', people: 'Type designer', stage: 'Main stage', kind: 'Talk' },
] },
{ label: 'Sat', date: '15 May', sessions: [{ start: '10:00', title: 'Fast pages', stage: 'Hall B', kind: 'Workshop' }] },
]}
>
<span slot="headline">Three days, <em>one hall</em></span>
</ScheduleDays>Without a key the registry answers 401 with an upgrade message.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
days | { label, date, note?, block?, sessions: { start, end?, title, people?, stage?, kind?, id? }[] }[] | none | One to seven days. A session's times are 24-hour; id makes it a link target. |
stages | Record<string, 1 | 2 | 3 | 4 | 5> | none | Each stage's colour block by its name; a stage not listed takes the blocks in turn. |
eyebrow | string | none | A short line above the heading. |
headline | string | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
label | string | 'Day' | Accessible name of the row of days (the fieldset's legend). |
stageLabel | string | 'Stage' | The word a screen reader hears before a stage. |
level | 1 | 2 | 3 | 2 | Heading level of the section's heading; each day's title is one below. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | unset (paints nothing) | The section's ground; the chips keep their blocks 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-sched.ma-sched__day.ma-sched__day-date.ma-sched__day-label.ma-sched__days.ma-sched__eyebrow.ma-sched__head.ma-sched__headline.ma-sched__kind.ma-sched__list.ma-sched__note.ma-sched__panel.ma-sched__panel-title.ma-sched__people.ma-sched__session.ma-sched__stage.ma-sched__tags.ma-sched__time.ma-sched__title.ma-sched__what
Slots
slot="eyebrow"slot="headline"
Reduced motion
A day's sessions appear at once, without their short rise.
With ClientRouter
CSS only; the picked day lives in the radio buttons and resets with the page.
Why it is built this way
- The days are radio buttons in a fieldset: the arrow keys move along them, a screen reader says which is picked, and the panel that shows is plain CSS state.
- Each day keeps a title of its own (hidden while the chips pick it), so without :has() the days stack and still say which is which.
- A stage's colour is the same chip on every day, so a stage is found by its colour at a glance.
- The times are tabular figures in the mono face, so a column of them lines up.
Replaces: Agenda widgets (event platforms) · Schedule tabs. See the migration table.
Related
Hero Poster
ProThe first screen of an event, made like its poster: one colour block with the edition and the place in the mono face, the name huge, the dates, a line, two actions, three facts, a countdown to the doors (core CountdownFlip) and the days as chips, and beside them a composition of nine shapes in the block's drawing colours that pop into place one after another as the page opens and turn a quarter when a pointer rests on them, one of them turning round a quarter at a time once they are in, inside five seconds, then resting.
every browserloadhover
Lineup Grid
ProWho is on: each person a drawn portrait on a colour block (PortraitArt, seeded from the name), the name and what they do, and on the back of the portrait their session: its title, the day and time, the stage.
newly · Chrome 105 · Firefox 121 · Safari 15.4hover
Ticket Tiers
ProThe tickets, as tickets: each tier a card with a perforated line under its head (a notch cut from each side), the name and the price, what it includes, how many are left (a count, and a bar that fills as the card comes into view) and its action.
Chrome 120 · not Firefox · Safari 26scrollhover
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown