Link

Shows a link to another page or location.

Read the component catalog for more examples.

link-demo.tsx

"use client";import { Link } from "@/components/vip-ui/link";export function LinkDemo() {  return (    <p className="text-sm leading-7">      Read the <Link href="/components">component catalog</Link> for more      examples.    </p>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-link.json

External link

Add hidden text that tells screen reader users about the new tab.

React Aria Link

link-external-demo.tsx

"use client";import { ArrowUpRightIcon } from "@phosphor-icons/react";import { Link } from "@/components/vip-ui/link";export function LinkExternalDemo() {  return (    <Link      href="https://react-aria.adobe.com/Link"      target="_blank"      rel="noopener noreferrer"      className="inline-flex items-center gap-1 text-sm"    >      React Aria Link      <ArrowUpRightIcon size={14} aria-hidden="true" />      <span className="sr-only"> (opens in a new tab)</span>    </Link>  );}

API reference

Link takes the props of React Aria Link (opens in a new tab).