Introduction

These are 16interface components pulled out of real, shipped work — a dashboard, a farm-themed marketing site, a hackathon map app, a few company sites — each isolated into a single self-contained file, with no import from the project it came from. What you see in the Preview tab is the same component running the same way it did in production; the code in the source tab is the exact file published to the registry, read at build time, so it can never quietly drift out of sync with what's shown — or with what you install.

Isolating a component out of a live codebase means stripping its real data fetching, its design-system tokens, and often its fonts and assets, and replacing them with something self-contained: inline mock data, literal hex colors instead of a shared theme, a plain useState instead of a store. The mechanics — the animation, the layout math, the interaction — are untouched; only what they depended on outside the component changed.

Each component keeps the visual language of the project it came from rather than being forced into one house style — the wood-panel quest board reads differently from the frosted glass CTA on purpose. The showcase chrome around them (this sidebar, the tab bar, the footer) is the one thing that's consistently ethankd.com's own black/white/grey identity.

This is a shadcn registry, so every component installs with the shadcn CLI into your own codebase — source you own, not a dependency you import. Each component's page carries its own command:

npx shadcn@latest add https://ethankd.com/r/tab-pill.json

Components carry the handful of CSS variables and rules they actually need, so installing one on its own is enough — nothing renders unstyled because a token was left behind. If you'd rather have the whole look at once, install the theme instead of the per-component variables:

npx shadcn@latest add https://ethankd.com/r/ethankd-theme.json

To pull several without retyping the host, register the namespace once and refer to items by name:

npx shadcn@latest registry add @ethankd=https://ethankd.com/r/{name}.json
npx shadcn@latest add @ethankd/tab-pill @ethankd/digit-roller

The interface plays short sounds on copy, tab and replay. There is no autoplay — browsers block audio until you interact with the page, and every cue here fires from a click you made. There is also no mute control, so if you need silence, use your system or tab volume.

Motion respects prefers-reduced-motion where a component's animation is decorative rather than the point: the character-shimmer text, the Dynamic Island header, and the command palette all check it directly and fall back to an instant state change.

Every focusable element in this section shares one visible focus ring (defined once, in .iq-scope); the two components that would otherwise arrive somewhere without that rule declare an equivalent ring themselves, so installing one on its own never costs you the keyboard affordance. Tabs use aria-selected, the current sidebar item is marked with aria-current="page", and search opens on ⌘K or / from anywhere in the docs.