Link

A link allows a user to navigate to another page or resource.

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/link

Usage

import { Link } from '@/components/ui/link'

<Link href="/docs">Documentation</Link>

As a link

Passing href renders a real <a>; add target="_blank" (with rel) to open a new tab. To route internal hrefs through your app router, override Link in your project the same way Breadcrumbs does for BreadcrumbLink.

<Link href="https://dotui.org" target="_blank" rel="noreferrer">
  dotUI
</Link>

Examples

Default

View documentation

In Text

Built on React Aria Components for accessibility and styled with Tailwind CSS. Read the getting started guide to learn more.

ProductFeatures Pricing Changelog

CompanyAbout Blog Careers

With Icon

Read the docs Read the changelog Open in v0

API Reference

A link allows a user to navigate to another page or resource within a web page or application.

Prop	Type	Default
	`"accent" \| "quiet" \| "unstyled"`	`'accent'`
	`ReactNode \| function`	`—`
	`boolean`	`—`

Last updated on 7/9/2026