Hud Code
The inline citation chip: a monospace token inside a sentence, tinted with --primary so it reads as verifiable data rather than as a snippet of source.
Preview
The survey puts the count at forty-one birds, which agrees with [[pond/2026-03]] and contradicts the ranger's note from the week before. She says as much on the tape at @ 00:12:04, which is worth hearing before quoting either figure.
Both chips sit inside prose that styles code as a neutral chip. One plain class beats it: every DuckProse rule is wrapped in :where(), so all of them are zero specificity and nothing here needs !important.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
pnpm dlx shadcn@latest add @duck/hud-codePulls in @duck/theme. Already installed items are skipped.
Usage
import { HudCode } from "@/components/ui/hud-code"The file lands in components/ui/hud-code.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| interactive | boolean | false | Render a button instead of a code element, for a citation that runs a handler. Ignored under asChild — the child is already the control. |
| asChild | boolean | false | Render the child element: an anchor or a next/link Link, for a citation that has a URL. |
| disabled | boolean | - | The button form only. An anchor cannot be disabled. |
| children | React.ReactNode | - | The token: a wikilink, a timecode, a record id. It is nowrap, so keep it short enough not to overhang the measure. |
Rules
What keeps this component from turning into noise.
- A citation and a code span are different things. DuckProse's neutral --muted chip is right for a snippet of source; this is for the token the reader is meant to be able to verify, which is why it is the primary colour and not grey.
- Restyling prose internals: every DuckProse rule is wrapped in :where() and therefore has zero specificity, so one plain class on the element beats all of it with no !important anywhere. Map the tag once and render your own component — with react-markdown that is `components={{ code: ({ children }) => <HudCode>{children}</HudCode> }}`, or `<HudCode asChild><a href={hrefFor(children)}>{children}</a></HudCode>` when the citation resolves to a URL.
- It cannot move the line it sits in, and that is load-bearing: 0.875em with the leading collapsed keeps its box under the paragraph's strut, and padding and border on an inline box never enter the line box at all. The hover state is fill and border only — transform does not apply to inline boxes, and going inline-block to allow one would put the padding back into the line.
- Inline only. A block of source is a pre, which DuckProse already styles; a HudCode around one would tint the whole block primary.
- The interactive forms drop the code element rather than nesting one inside the control: a nested code would be caught by DuckProse's own code rule and need three utilities to undo, and "button, tape at 12:04" is a more useful announcement than a wrapper most screen readers never mention. If the token really is source, leave it non-interactive.