Component

Link Card

An anchor that wraps an entire card so the whole surface is clickable. Uses the headless @refraction-ui/link-card core and forwards every native anchor attribute.

Basic

Wrap any content; the full card becomes a single link.

DocumentationGuides, API references, and examples for getting started.

Installation

$pnpm add @refraction-ui/react-link-card

Usage

tsx
import { LinkCard } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <LinkCard
      href="/docs"
      className="block rounded-xl border border-border bg-background p-5 hover:border-primary/50"
    >
      <span className="block text-sm font-semibold">Documentation</span>
      <span className="mt-1 block text-sm text-muted-foreground">
        Guides and API references.
      </span>
    </LinkCard>
  )
}

Card grid

Link cards compose naturally into grids of navigable destinations.

ButtonClickable button with variants and states.PaginationNavigate across pages of content.Mobile NavCollapsible navigation for small screens.

Props

PropTypeDefaultDescription
hrefstring--Destination URL. Forwarded to the underlying anchor element.
classNamestring--Additional CSS classes to apply to the anchor.
...propsReact.AnchorHTMLAttributes<HTMLAnchorElement>--All standard anchor attributes (target, rel, onClick, children, etc.) are forwarded to the rendered <a>.