Editorial

A self-contained glossy-magazine theme preset — a single-column feature with a small-caps kicker and issue rule, a high-contrast serif display headline, an italic standfirst, a small-caps byline, a drop-cap opening, a hairline-barred pull-quote, and a pair of buttons, all breathing in generous whitespace with one disciplined ink accent. A keyboard-operable radiogroup of surface chips re-tokens the whole page live (warm Ivory, cool Slate, dim night-reading Ink); the only motion is a soft CSS color crossfade on switch, and reduced motion makes every swap instant and fully static.

csspro

The EssayIssue 04

The Quiet Craft of Slow Mornings

On ritual, restraint, and the unhurried pleasures of a well-kept hour.

Words by A. Marlowe6 min read

here is a particular grace to the first hour of a day spent without haste. The kettle finds its own rhythm; the light arrives on its own schedule; and the mind, unhurried, settles into the small ceremonies that a well-kept morning affords.

Elegance is what remains when nothing else insists on being noticed.

What remains, when the noise is set aside, is not less but more: a clearer line, a warmer margin, a sentence allowed to finish itself. The unhurried hour asks little and returns a great deal.

Switch the look — click a surface chip, or focus it and use the arrow keys.

Installation

CLI

npx shadcn@latest add @crucible/editorial

Props

Prop	Type	Default	Description
variant	string		Controlled active preset id (matches a preset's `id`).
defaultVariant	string	"ivory" (first preset)	Initial preset id when uncontrolled.
onVariantChange	(id: string) => void		Fires with the next preset id whenever the switcher changes.
presets	EditorialPreset[]	the three built-in surfaces	Override the built-in reading surfaces (chips + palettes).
colors	Partial<EditorialPalette>		Token overrides merged over the active preset — makes any palette reachable.
duration	number	0.55	Seconds the palette crossfade takes when switching surfaces.
paused	boolean	false	Freeze the palette crossfade — surfaces swap instantly.
kicker	string	"The Essay"	Small-caps kicker above the headline.
issue	string	"Issue 04"	Issue marker printed at the top rule.
heading	string	"The Quiet Craft of Slow Mornings"	Serif display headline.
standfirst	string	a short generic standfirst	Italic standfirst under the headline.
byline	string	"Words by A. Marlowe"	Small-caps byline.
readingTime	string	"6 min read"	Reading-time meta shown beside the byline.
body	string[]	two generic paragraphs	Body paragraphs. The first receives the drop-cap; the pull-quote follows it.
pullQuote	string	a generic aphorism	Large italic pull-quote set between the body paragraphs.
primaryLabel	string	"Read the essay"	Filled button label.
secondaryLabel	string	"Save"	Hairline-outline button label.
label	string	"Editorial theme preset"	Accessible label for the panel region.
switcherLabel	string	"Reading surface"	Accessible label for the surface switcher group.
Also accepts all props of `Omit<React.ComponentPropsWithoutRef<"article">, "onChange">` — they pass through to the underlying element.

Honors prefers-reduced-motion with a designed static fallback, and passes className through.

Editorial

The preview is live. The source is Pro.

Installation

Props