# Source

A single citation chip with a hover-card preview — the building block for inline source references below assistant answers.

<p class="kai-tag-sub">kai-source</p>

A citation chip that shows a domain label and reveals a hover card with a headline and description — drop it below an assistant message to let users verify where an answer came from.

## Preview

> **tip:** 
Use `<kai-source>` for a **single citation chip** in isolation — inside a custom message template or a tooltip. For two or more sources, reach for `<kai-sources>` instead: it accepts a `sources` array and lays chips out in a wrapping row.

## Usage

All props are plain HTML attributes — no JavaScript needed:

```html
<kai-source
  href="https://kitn.dev"
  headline="kitn — the kit"
  description="Composable SolidJS + web-component chat UI."
  show-favicon
></kai-source>
<script type="module">import '@kitn.ai/ui/elements';</script>
```

- **`href` is required.** The element renders nothing without it.
- **`label`** defaults to the hostname (`kitn.dev`). Pass an explicit label when the domain is ambiguous or too long.
- **`headline`** (not `title`) — `title` is a reserved HTML attribute that conflicts with custom element constructors.
- Clicking the chip opens the URL directly — the element emits no events.

## Examples

### Basic Citation

### With Favicon

### Custom Label

Override the domain default with `label` when you want a shorter or more recognisable name.

### Full Detail with Favicon

## Props

## Composed from