Source link

Links an answer to its source.

1DisclosureReact Aria documentationExpansion state and keyboard behavior

source-link-demo.tsx

"use client";import { SourceLink } from "@/components/vip-ui/source-link";export function SourceLinkDemo() {  return (    <SourceLink      className="w-full max-w-sm"      href="https://react-aria.adobe.com/Disclosure"      index={1}      label="Disclosure"      source="React Aria documentation"      description="Expansion state and keyboard behavior"    />  );}

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-source-link.json

Source list

Set index to the citation number in the answer.

source-link-list-demo.tsx

"use client";import { SourceLink } from "@/components/vip-ui/source-link";const sources = [  {    href: "/components/disclosure",    label: "Disclosure",    source: "vip/ui docs",  },  {    href: "https://react-aria.adobe.com/Disclosure",    label: "Disclosure",    source: "React Aria documentation",  },  {    href: "https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/",    label: "Disclosure (Show/Hide) Pattern",    source: "WAI-ARIA Authoring Practices Guide",  },];export function SourceLinkListDemo() {  return (    <ol aria-label="Sources" className="grid w-full max-w-sm gap-2">      {sources.map((item, index) => (        <li key={item.href} className="min-w-0">          <SourceLink {...item} index={index + 1} />        </li>      ))}    </ol>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Link (opens in a new tab).

href: stringRequired: The URL of the source.
label: stringRequired: The title of the page.
source: stringRequired: The name of the site or document.
index: number: The citation number. Shows before the label.
description: string: Text below the source.