Link

Styled wrapper around react-router's <Link> for use inside admin views.

Installation

pnpm dlx shadcn@latest add @shadmin/link

Usage

Use it like a regular react-router <Link>: the only difference is the default Tailwind class set (primary colour, underline on hover) that matches the rest of the admin UI.

import { Link } from "@/components/admin";
 
export const PostShow = () => (
  <p>
    Read more on <Link to="/posts/1">this page</Link>.
  </p>
);

Props

<Link> forwards every prop of react-router's <Link>. The relevant extras are:

PropRequiredTypeDefaultDescription
toRequiredTo—Destination URL (string or { pathname, search, hash })
classNameOptionalstring—Extra Tailwind classes appended to the default ones

className

Pass className to override the styling. The default classes are appended so you can use Tailwind utilities to recolour or unstyle the link:

<Link to="/posts/1" className="text-destructive">
  Danger zone
</Link>