ComponentsLink
Link
Take users to another page or a section on the same page.
On this page
Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.
View registry filesImport the component into your page or component file.
import { Link } from "@dethink/components";Try the examples, then open the code to use them in your app.
Variants and underline
default, muted, nav, and destructive variants with hover, always, and none underline modes.
Read the theming guide to swap every token, or skim the changelog for what shipped.
Show sourceexamples/link/basic.tsx
"use client";
import { Link } from "@dethink/components";
export function LinkBasic() {
return (
<div className="mx-auto max-w-md space-y-2 text-sm">
<p>
Read the <Link href="#basic">theming guide</Link> to swap every token,
or skim the{" "}
<Link href="#basic" variant="muted">
changelog
</Link>{" "}
for what shipped.
</p>
<p>
<Link href="#basic" underline="always">
Always underlined
</Link>{" "}
·{" "}
<Link href="#basic" variant="nav" underline="none">
Nav link
</Link>{" "}
·{" "}
<Link href="#basic" variant="destructive">
Delete account
</Link>
</p>
</div>
);
}Router composition and external links
asChild merges styling onto a Next.js Link; external links pair a visual indicator with screen-reader-only context.
Browse the catalog stays a real Next.js client-side navigation.
Show sourceexamples/link/router.tsx
"use client";
import NextLink from "next/link";
import { Link } from "@dethink/components";
import { ExternalLink } from "lucide-react";
export function LinkRouter() {
return (
<div className="mx-auto max-w-md space-y-2 text-sm">
<p>
{/* asChild merges the styling onto the framework's router link. */}
<Link asChild>
<NextLink href="/components">Browse the catalog</NextLink>
</Link>{" "}
stays a real Next.js client-side navigation.
</p>
<p>
<Link
href="https://github.com/parveshh/dethink-components"
target="_blank"
rel="noreferrer"
>
View source on GitHub
<ExternalLink
aria-hidden="true"
className="ml-1 inline size-3.5 align-[-0.125em]"
/>
<span className="sr-only">(opens in a new tab)</span>
</Link>
</p>
</div>
);
}Examples that combine components for common tasks.
Breadcrumbs
nav-variant links in a labeled breadcrumb list — the current page is plain text with aria-current, not a link to itself.
Link renders a real anchor element (or its asChild child).
| Prop | What it does | Default |
|---|---|---|
hrefstring | Required unless asChild delegates it to the child element. | Not set |
variant"default" | "muted" | "nav" | "destructive" | Color treatment; nav is quiet until hover for menus. | "default" |
underline"hover" | "always" | "none" | Underline behavior. | "hover" |
asChildboolean | Merge styling onto the single child — the seam for framework router links. | false |
…native anchor propsAnchorHTMLAttributes | target, rel, download, aria-current, and the rest. | Not set |