# Sources and citations
> Paragraph with numbered citations; hovering or focusing one draws a dotted beam to its source chip and loads a preview card.
- Element: `<hf-sources>`
- React: `import { HfSources } from "@/components/lumesec/hf-sources"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-sources.json
- Page: https://elements.lumesec.ai/components/pixel-hd/sources



Live preview: https://elements.lumesec.ai/view/hf-sources

```html
<hf-sources></hf-sources>
```

## Installation

```bash
npx shadcn@latest add @lumesec/hf-sources
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-sources.json
```

## Usage

React:

```tsx
import { HfSources } from "@/components/lumesec/hf-sources";

export function Example() {
  return (
    <HfSources />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-sources.js"></script>

<hf-sources></hf-sources>
```

## Behaviour

Hovering a citation draws a dotted beam to its source chip with packets running along it. The preview loads with a pixel skeleton, and each favicon is the domain's first letter on a dotted tile.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event  | React prop | Detail                                            | Description                                                                                            |
| ------ | ---------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| `open` | `onOpen`   | `{ source: { t: string, d: string, s: string } }` | Fires when a citation or source chip is clicked. `t` is the title, `d` the domain and `s` the snippet. |

## Accessibility

* Citations are buttons with an `aria-label` such as `Source 1: <title>`.
* Source chips are `<a href="#">` elements with `role="listitem"` inside a `role="list"`; that role replaces the link role, and clicks do not navigate.
* Focusing a citation or chip with Tab selects it, the same as hovering.
* The preview card is an `aria-live="polite"` region.
* Favicon letters are `aria-hidden` text; their tiles, the beam and the loading skeleton are drawn on an `aria-hidden` canvas.
* Reduced motion: the preview fills in without the skeleton delay, the beam is drawn whole without packets, and drawing stops between interactions.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted` and `--ui-surface`.

## Notes

* The paragraph, three citations and three sources are built-in demo content and cannot be configured.
* Chips do not open URLs; handle `open` to navigate.
* Favicons are the first letter of the domain, set as text on a dotted tile in a colour derived from the domain.
* Without reduced motion, the packets keep the canvas redrawing every frame while the element is visible.