Link

Inline navigation text. 3 colors × 4 states.

Delivery times and charges

tsx

import { Link } from "@/components/ui/link";

export default function Example() {
  return <Link href="#shipping">Delivery times and charges</Link>;
}

Installation

$ npx uix-ui@latest add link

This copies the file into components/ui/link.tsx in your project. npx shadcn@latest add @uix/link works too.

Usage

link.tsx

import { Link } from "@/components/ui/link";

<Link href="#shipping">Delivery times and charges</Link>

Examples

Colours and arrow

Brand link Neutral link Danger link With arrow

tsx

import { Link } from "@/components/ui/link";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-5">
      <Link href="#menu" color="brand">Brand link</Link>
      <Link href="#menu" color="neutral">Neutral link</Link>
      <Link href="#menu" color="danger">Danger link</Link>
      <Link href="#menu" showIcon>With arrow</Link>
    </div>
  );
}

Props

Prop	Type	Default	Description
`color`	`brand \| neutral \| danger`	`"brand"`
`showIcon`	`boolean`	`false`	Shows the arrow-up-right icon after the text.

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

Dependencies

Installed for you by the CLI.

class-variance-authority
clsx
tailwind-merge

lib/utils.ts
components/ui/icons.tsx

Getting started

Actions

Forms

Navigation

Feedback

Data display

Overlays

#Installation

#Usage

#Examples

#Colours and arrow

#Props

#Dependencies