For AI agents and crawlers: a structured index of this site is available at https://danny.is/llms.txt.

UI Components

Site styleguide

The components on this page are the reusable building blocks I use outside of my content files.

Pill

Small label badges for tags, categories, status indicators and the like. By default a Pill is a subtle outline but you can pass a color and it fills, deriving a readable text colour from the background with color-mix().

Prop Type Default Description
text string required The label text.
color string — Fill colour. When set, the pill switches from outline to filled.
textColor string — Override the auto-derived text colour.

Default

<Pill text="Default" />
Default

Custom colour

<Pill text="Coral" color="var(--color-coral)" />
<Pill text="Blue" color="var(--color-blue)" />
<Pill text="Green" color="var(--color-green)" />
<Pill text="Purple" color="var(--color-purple)" />
<Pill text="Orange" color="var(--color-orange)" />
<Pill text="Custom Text" color="var(--color-charcoal)" textColor="var(--color-coral)" />

Coral Blue Green Purple Orange Custom Text

Spinner

An animated loading indicator drawn in the accent colour. The size prop accepts any CSS length.

Prop Type Default Description
size string '5rem' Width and height as a CSS length. 
<Spinner size="1.5rem" />
<Spinner size="2.5rem" />
<Spinner size="4rem" />

ThemeToggle

A three-option segmented control (light / auto / dark) with a sliding thumb. CSS handles all the visuals via :has(); the script only tracks state and talks to the global theme API. An optional class prop is forwarded to the wrapper. 

<ThemeToggle />

MarkdownContentActions

The copy / view / share links shown below content for grabbing the page as markdown. The share link only appears on devices that support the Web Share API.

Prop Type Default Description
markdownUrl string required URL of the .md source to copy and link to.
disableShare boolean false Hide the share link entirely, even where the Web Share API exists. 
<MarkdownContentActions markdownUrl="/example.md" />
copy / view as markdown

FormattedDate

Renders a Date as a machine-readable <time> element with a human-friendly label (e.g. Jun 12, 2025). Used for publication dates across the site.

Prop Type Default Description
date Date required The date to render.
itemprop string — Optional microdata itemprop attribute. 
<FormattedDate date={new Date('2025-06-12')} />