# Source

> Citation chip with a hover/focus preview of the source (title, host and excerpt).

Source: https://ui.jcsoftdev.com/docs/components/source

Citation chip with a hover/focus preview of the source (title, host and excerpt).

## Import

```ts
import { Source } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/source`.

## Usage

```tsx
<Source
  index={1}
  title="Cuidado de la barba: guía para principiantes"
  url="https://www.barberia-ejemplo.pe/guias/cuidado-de-la-barba"
  snippet="Lava la barba dos o tres veces por semana, aplica aceite en pocas gotas y peina en la dirección del crecimiento."
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `index` | `number` |  | Citation number shown in the chip. |
| `title` * | `string` |  |  |
| `url` * | `string` |  | Only http(s) and mailto URLs are linked; anything else renders a non-clickable chip. |
| `snippet` | `string` |  | Short excerpt shown in the hover preview. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/ai-source--default)
- [Group](/storybook/?path=/story/ai-source--group)
- [Narrow](/storybook/?path=/story/ai-source--narrow)
- [Preset Brutal](/storybook/?path=/story/ai-source--preset-brutal)

## Source

`packages/ui/src/ai/source/source.tsx`