Link

A semantic anchor element with style variants and support for external links and framework router composition.

#Installation

npx @dinachi/cli@latest add link

#Usage

tsx

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

#Examples

#Framework Router Composition

The render prop accepts a React element or a function, matching the Base UI render prop pattern. This produces a single element (one tab stop) with both link behavior and styled appearance.

#Element form

Pass a React element to replace the underlying <a> tag:

tsx

import { Link } from '@/components/ui/link'
import NextLink from 'next/link'
 
<Link render={<NextLink href="/about" />}>About</Link>

tsx

import { Link } from '@/components/ui/link'
import { Link as RouterLink } from 'react-router-dom'
 
<Link render={<RouterLink to="/about" />}>About</Link>

#Function form

Pass a function to receive the merged props and spread them yourself:

tsx

import { Link } from '@/components/ui/link'
import NextLink from 'next/link'
 
<Link render={(props) => <NextLink {...props} href="/about" />}>
  About
</Link>

#Styling Non-Link Elements

Use linkVariants to apply link styles to other elements:

tsx

import { linkVariants } from '@/components/ui/link'
 
<a className={linkVariants({ variant: "muted" })}>Styled anchor</a>

#API Reference

Prop	Type	Default	Description
variant	'default' \| 'muted' \| 'plain' \| 'unstyled'	'default'	The visual style variant of the link.
render	ReactElement \| (props, state) => ReactElement	—	Replace the rendered <a> element with a different component (e.g., Next.js Link or React Router Link). Accepts an element or a render function.
external	boolean	false	When true, adds target="_blank", rel="noopener noreferrer", and an external link icon.
href	string	—	The URL the link points to.
target	string	'_blank' when external	The browsing context for the link. Defaults to "_blank" when external is true.
rel	string	'noopener noreferrer' when external	The relationship of the linked URL. Defaults to "noopener noreferrer" when external is true.
className	string	—	Additional CSS classes to apply.
children	React.ReactNode	—	The link content.