Link
Fluent 2 visuals, shadcn APIs. Standalone and inline-in-prose variants, a visited-state note, an aria-disabled example, and asChild wrapping both a plain anchor and next/link.
Light
This kit follows Fluent 2 in looks and shadcn/ui in API. Read the component conventions before adding a new one, and check the Fluent 2 reference for the visual spec. Fluent requires an always-on underline for links embedded in body text, since color contrast against surrounding text alone isn't a reliable way to tell them apart.
This component does not style :visited — Fluent 2 does not define a distinct visited color, and browsers already apply their own default treatment (and restrict what CSS can change on it). Consumers who need a custom visited color can target [data-slot="link"]:visited in their own app.
Anchors have no native disabled attribute. Prefer omitting href entirely on a disabled link (right example) so assistive tech drops it from the tab order; when the href must stay for layout/routing (left example), pair aria-disabled="true" with tabIndex={-1} to fully remove it from keyboard activation.
Dark
This kit follows Fluent 2 in looks and shadcn/ui in API. Read the component conventions before adding a new one, and check the Fluent 2 reference for the visual spec. Fluent requires an always-on underline for links embedded in body text, since color contrast against surrounding text alone isn't a reliable way to tell them apart.
This component does not style :visited — Fluent 2 does not define a distinct visited color, and browsers already apply their own default treatment (and restrict what CSS can change on it). Consumers who need a custom visited color can target [data-slot="link"]:visited in their own app.
Anchors have no native disabled attribute. Prefer omitting href entirely on a disabled link (right example) so assistive tech drops it from the tab order; when the href must stay for layout/routing (left example), pair aria-disabled="true" with tabIndex={-1} to fully remove it from keyboard activation.