Link

React Link components are used for navigation between pages or sections. They render semantic anchor elements and are commonly used for internal routing, external links, and inline navigation.

This Link component is built with React and styled using Tailwind CSS. It supports different sizes, visual variants, and optional icons.

Installation

Usage

Import the component and pass the required props.

import { Link } from "@/registry/core/link";

export default () => <Link href="/about">Learn more</Link>;

Examples

Variants

Use variants to change the visual style of the link.

<Link variant="primary" href="/docs">
  Primary Link
</Link>

<Link variant="dark" href="/blog">
  Dark Link
</Link>

Sizes

Choose a size that fits the surrounding text.

<Link size="sm" href="/help">
  Small Link
</Link>

<Link size="md" href="/contact">
  Medium Link
</Link>

External Link

Use standard anchor attributes for external navigation.

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Website
</Link>

API Reference

Link

Extends a element props.

Accessibility

• Uses semantic <a> elements for proper navigation
• Supports all standard anchor attributes including target and rel
• Keyboard accessible with standard link behavior
• Hover states provide clear visual feedback
• Icons inherit text color for consistent styling

Notes

• Icons are automatically sized to 20px (1.25rem) via the [&>svg]:size-5 class
• The component uses inline-flex for proper icon alignment with text
• Smooth color transitions on hover for better UX
• Works with any routing library by passing custom href props
• Supports all standard anchor attributes