Source

kai-source

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.

• Shadow DOM
• All props are attributes
• Optional favicon
• Hover-card preview
• No events

Preview

When to use

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:

<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

Code

With Favicon

Code

Custom Label

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

Code

Full Detail with Favicon

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
href	string	''	The URL this citation links to (the domain also seeds the default label/favicon).
label	string	—	Trigger label (defaults to the domain).
headline	string	''	Hover-card headline. Attribute: `headline` (`title` is avoided because it is a global HTML attribute that reflects in a CE constructor and breaks it).
description	string	''	Hover-card body text describing the source.
showFavicon	boolean	false	Show the source's favicon next to the trigger label.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

SourceSourceTriggerSourceContentSourceList

---

Need a hand? Report a bug Ask for help