Atoms / Link

Link

<Link />Stable

Inline anchor with two tones — neutral for ambient prose, primary for call-to-action moments. Both share a 4px underline-offset, tinted decoration that solidifies on hover, and a focus ring. Use asChild to wrap Next.js's Link without losing the styling.

import { Link } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Tone

Context

Icon

Read more about how we grade ceiling and floor before drafting a verdict.

<p>
  Read more about{" "}
  <Link href="#">
    how we grade ceiling and floor
  </Link>{" "}before drafting a verdict.
</p>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

No Playground entry registered for Link. Add it to app/_components/playground/registry.tsx.

Tones

Read more about how we grade ceiling and floor before drafting a verdict.

<Link href="#">how we grade ceiling and floor</Link>

Composition

View the full grading rubric
<Link href="#">View the full grading rubric</Link>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.