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

npx @tailgrids/cli add link

Usage

Import the component and pass the required props.

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

export default function Example() {
  return <Link href="/about">Learn more</Link>;
}

Examples

Variants

Use variants to change the visual style of the link.

Sizes

Choose a size that fits the surrounding text.

External Link

Use standard anchor attributes for external navigation.

Note: 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.

Custom

Combine different variants, sizes, and icons to create custom link styles for various use cases.

Note: Works with any routing library by passing custom href props. Supports all standard anchor attributes.

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 with smooth color transitions
• Icons inherit text color for consistent styling