Components

Link

Text link: inline in running text, accent for UI links, subtle for secondary links. `external` opens a new tab safely.

Read the getting started guide first.

Usage

Use it to:

  • navigate to another page or site
  • inline references in text

Don’t use it to:

  • actions that change data (use Button)
  • a link styled as a button (use Button asChild)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/LinkExample.tsx
import { Link } from '@krackedui/motion';

export function LinkDemo() {
  return (
    <p>
      Read the <Link href="/guide">getting started guide</Link> first.
    </p>
  );
}

Examples

Variants

External

Dark theme

API Reference

Link

An <a>; supports all of its props. Adds:

PropTypeDefault
href
string
variant
"inline""accent""subtle"
"inline"
external
boolean
false
asChild
boolean
false

Accessibility

  • A native link: Tab focuses it, Enter follows it; the focus ring is drawn around the text.
  • External links announce that they open a new tab.
  • Link text should make sense on its own (“Pricing”, not “click here”).
© 2026 Motion. Internal documentation.