

<Preview name="SourcesDefaultExample" />

## Overview [#overview]

`Sources` groups response references behind a compact trigger. It is useful when citations should be available without taking over the message body.

## Usage [#usage]

```tsx
import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="SourcesDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Sources defaultOpen>
      <SourcesTrigger count={sources.length} />
      <SourcesContent>
        {sources.map((source) => (
          <Source href={source.href} key={source.href} title={source.title} />
        ))}
      </SourcesContent>
    </Sources>
    ```
  </Tab>
</Tabs>

### Closed [#closed]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="SourcesClosedExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Sources>
      <SourcesTrigger count={3} />
      <SourcesContent>
        <Source href="https://example.com/lease-review" title="Lease review memo" />
      </SourcesContent>
    </Sources>
    ```
  </Tab>
</Tabs>
