Skip to main content
The Anchor component wraps content (typically headings) and adds a link icon that appears on hover. When clicked, it copies the current URL with the anchor hash to the clipboard.

​
Import

import { Anchor } from '@luminescent/ui-qwik';

​
Usage

<Anchor id="getting-started">
  <h2>Getting Started</h2>
</Anchor>

​
Props

​
id
string
The anchor ID used to generate the hash link. When provided, displays a clickable link icon.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
...props
PropsOf<'div'>
All standard HTML div attributes are supported (except the standard class prop).

​
Behavior

When the link icon is clicked, it copies the full URL including the anchor hash to the clipboard. The link icon has low opacity by default and becomes fully visible on hover.

​
Styling

The component applies these default classes:
  • group flex items-center gap-2 scroll-mt-32 - Groups items with flex layout and scroll margin for fixed headers
The link icon has:
  • opacity-10 - Low opacity by default
  • group-hover:opacity-100 - Full opacity on parent hover
  • Smooth transition animations with duration-300 and faster duration-75 on hover

Build docs developers (and LLMs) love

Get started for freeTalk to us