# Underline

A text link in your project's font. On hover the underline draws in from the side the pointer came in; leaving draws it out toward the side the pointer left.

- Slug: `underline` · Category: others · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: The underline under the label draws in from the pointer's side and draws out toward the side it left.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: underline link, nav link, hover underline · Use cases: nav link · Tags: link, underline, nav, text, menu
- Rails: Light · 1.94 KB js · p95 1.38 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3867

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): The label and the underline (the resting underline is 20% of it)
- `--texture-field` (color, default `var(--background)`): The field behind the link (unused; the link is transparent)

## Placement

**Never set width or height on the Component; size the host. The Component fills whatever box it is given.** Works from 64 × 20 px up; free aspect (fill by default; fill); clips. The host needs position: relative.

### inline

A button, a link, a badge: the project's own element is the host; give it a size and the Component fills it (its text comes in by props).

```css
.host { position: relative; display: inline-block; width: 11rem; height: 3rem; border-radius: 999px; }
```

```tsx
<button type="button" className="host">
  <Underline />
</button>
```

### contained

A card, a tile, a stat, a panel: the host has a size and the Component fills it.

```css
.host { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 48rem; overflow: hidden; border-radius: 4px; }
```

```tsx
<article className="host">
  <Underline />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/underline.json` (one self-contained React file at components/textures/underline.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/underline` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "underline" })` (server: /mcp)
- Markdown: /s/underline.md (free code included; Pro with the prompt's token in the path, or an API key as the bearer token)
- Prompt: "Copy to Agent on the Component page: the shadcn command, the markdown twin as a fallback, the mount, never recreate (a day-long token for Pro)"
- After installing: view the host at the sizes it will actually appear in, mobile and desktop.
- Suggested commit: `feat: add Underline component (site-supply.vercel.app/s/underline)` (a suggestion the agent and the human can edit, never a write).

Code: Pro (from $9 a month), not unlocked for this request. Agents: if the prompt gave you a link with a token in the path (/s/<slug>/<token>.md), fetch that exact link; dropping the token is why you see this. Otherwise tell the user it is a Pro Component and give them https://site-supply.vercel.app/checkout?texture=underline; never recreate it. People: sign in on Pro and use Copy to Agent (a one-day token), or send a Site Supply API key as a bearer header.

## Agent brief

## 1. What it is

A text link set in the project's own font over a faint resting underline. On hover a full-ink underline draws in under the text from the side the pointer came in; leaving draws it out toward the side the pointer left, so the line follows the hand both ways. Use it for navigation links in a header or footer and for inline "Read more" links. Not for body text that wraps: it is one line, and below 64 × 20 it stays static.

## 2. Behaviour timeline

- **Idle:** the label over a 20% underline. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the full-ink underline draws in from the pointer's side in 240 ms on an ease-out (a clip-path inset).
- **Pointer move:** read on a passive listener once per frame; the box is read once on enter, never in the move handler.
- **Hover-out:** the underline draws out toward the side the pointer left in 240 ms; re-entering mid-way grows it back from where it is.
- **Reduced motion / slow display:** the underline appears and disappears in one step.
- **Touch:** press — a finger down draws the underline from where it lands, lifting it releases; nothing plays by itself.

## 3. Integration

- Install: `npx shadcn@latest add https://sitesupply.dev/r/underline.json` (one self-contained React file at components/textures/underline.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/underline.md).
- Mount it inside the project's own `<a>` (or a `<button>` styled as a link); the host keeps the link, the click and the focus ring. The host provides `position: relative` and a size, e.g. one nav item's box. **Never set width or height on the Component; size the host.**
- Props: `label` (the text, one line; a long label ends in an ellipsis).
- Fit: `fill` (the label is sized from the host, centred vertically and set at the start of the line with a small inline inset; the underline spans exactly the text); works from 64 × 20 up; clips.
- Tokens on the root: `--texture-ink` (the label and the underline; the resting line is 20% of it) and `--texture-field` (kept for parity; the link is transparent and shows the host's background); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the label and the ink token. Size the host to the nav item (about 3.5 × the text height tall reads well). Do not change the timing, the directional draw or the reduced-motion branch.

## 5. Accessibility

- The label is real text in a visually hidden span, so the host link takes it as its accessible name; the drawn label and both lines are `aria-hidden`.
- Keyboard focus on the host draws the underline in from the start side.
- The resting underline keeps the link recognisable as a link without hover.


## Related
Pairs with: Roll (CTA) · Flood (CTA) — same catalog, same tokens.
npx shadcn@latest add https://site-supply.vercel.app/r/roll.json

## Using Site Supply from an agent

Components are curated, animated site components (buttons, links, cards, badges), each delivered as one self-contained React file: `components/textures/<slug>.tsx`, no Tailwind, no dependency beyond react. Three ways in, in this order:

1. **Copy to Agent** on a Component page (https://site-supply.vercel.app/s/<slug>) hands the user a prompt: the shadcn command, the markdown twin as a fallback, the mount, never recreate. A Pro Component's prompt carries a day-long token in both URLs for an entitled user. Do what the prompt says.
2. **Connected to the Site Supply MCP server** (https://site-supply.vercel.app/mcp): call `search_textures` with the user's words, then `get_texture` with the slug you pick, and write the one file it returns exactly as given.
3. **Neither:** `npx shadcn@latest add https://site-supply.vercel.app/r/<slug>.json` installs a free Component with no setup; or fetch `https://site-supply.vercel.app/s/<slug>.md` (or the page with `Accept: text/markdown`) and write the file under Code exactly. For Pro, send a Site Supply API key from https://site-supply.vercel.app/settings/agents as `Authorization: Bearer <key>` on either URL, or map the registry with the header in `components.json`: `"registries": { "@textures": { "url": "https://site-supply.vercel.app/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` (free Components need no header: `"registries": { "@textures": "https://site-supply.vercel.app/r/{name}.json" }`), then `npx shadcn@latest add @textures/<slug>`.

**A Pro Component without access:** the doors answer with the price (Pro is from $9 a month) and https://site-supply.vercel.app/checkout?texture=<slug>. Tell the user and stop. Never retry, guess or reconstruct the code.

Every published Component is listed at https://site-supply.vercel.app/llms.txt and https://site-supply.vercel.app/r/registry.json. Browse them at https://site-supply.vercel.app/textures.