AppLink

Internal/external link with styling options.

navigationlinktext

Import

import { AppLink } from "@/components/ui";

Basic Usage

AppLink Preview

Default link Primary link Muted link Destructive link

Always underline Hover underline No underline

Small Medium Large

External link

Code

tsx

<AppLink href="/dashboard">Go to Dashboard</AppLink>

External Link

Open in new tab with icon

1<AppLink href="https://example.com" external>
2  Visit Example.com
3</AppLink>

Variants

Different link styles

1<div className="space-y-2">
2  <AppLink href="/page" variant="default">Default link</AppLink>
3  <AppLink href="/page" variant="muted">Muted link</AppLink>
4  <AppLink href="/page" variant="underline">Underlined link</AppLink>
5</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring