Meta · 0nlyType

Example

Halden indexVersion 0.1September 2026

Founded 2014Oslo 2016Kyoto 2021Now

Format 18 × 25.7 cmPages 224Set in Archivo, Bodoni ModaPrinted Oslo, 2026

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/meta.json

Usage

meta-example.tsx

import { Meta, MetaItem } from "@/components/ui/meta"export default function Example() {return (<div className="grid gap-12"><Meta><span>Halden index</span><span>Version 0.1</span><span>September 2026</span></Meta><Meta variant="proportional" at={[2014, 2016, 2021, 2026]}><span>Founded 2014</span><span>Oslo 2016</span><span>Kyoto 2021</span><span>Now</span></Meta><Meta variant="credits"><MetaItem label="Format">18 × 25.7 cm</MetaItem><MetaItem label="Pages">224</MetaItem><MetaItem label="Set in">Archivo, Bodoni Moda</MetaItem><MetaItem label="Printed">Oslo, 2026</MetaItem></Meta></div>)}

Contract

Underneath: native. Its CSS lives in base.css, so every item may use it.
A frame row of words held apart by flexing hairlines, level on the first line's baseline. The row never wraps, so no hairline is left at the end of a line pointing at nothing: where the words don't fit, each one stacks in its place (balanced), tops level, as the corner notes of "Healthy habits" do.
data-variant="proportional" with at: after the score's proportional (space) notation, where distance is time. Each hairline is as long as the interval between its neighbours (--ot-span, set from at), in --ot-rule-strong because here the line is data. Where the row is too narrow, the hairlines fall to their shortest.
data-variant="credits" with MetaItem label: after Ikeda's SPECTRA credits. No hairlines between; one rule over small columns hung from it, each a pencil label over its value in ink, figures tabular. The columns wrap.

Props

Props of Meta
Prop	Type	What it does
`children`	`ReactNode`	The words. A hairline goes between each child. The row never wraps: where the words don't fit, each stacks in its own place.
`variant`	`"proportional" \| "credits"`	proportional makes each hairline as long as the interval between its neighbours in at, as the score's space notation makes distance time. credits drops the hairlines for one rule over small labelled columns: give it MetaItems.
`at`	`number[]`	For proportional: where each child stands (a year, a minute), one number per child.
`MetaItem label`	`ReactNode`	The small pencil label set over the item's value, in credits.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Meta	SHAPES / GRADIENTS frame row; "Healthy habits" corner notes	Words held apart by hairlines; stacked where they don't fit
Proportional meta	The score's proportional notation	Each hairline as long as the interval it stands for
Credits meta	SPECTRA credits	One rule, small columns of label over value