Attachments

kai-attachments

Every item keeps its own preview, size label and remove control, whatever layout you pick.

• Shadow DOM
• 3 variants
• Hover-card preview
• Optional lightbox

Preview

When to use

Show the files a prompt carries or a message cites: the composer, a message body, a sources rail. For a cited link rather than a file, use Link preview.

Usage

Set items in JavaScript (arrays can’t be HTML attributes); choose the presentation with the variant, hover-card, and removable attributes; listen for kai-remove.

Examples

Grid

variant="grid" — square image tiles for a gallery.

Code

Inline

variant="inline" — a compact icon + label chip per file, for a composer or message body.

Code

List

variant="list" — full-width rows with a preview thumbnail, filename and media type.

Code

Removable

Add removable for a per-item remove button (the ×); it fires the kai-remove event.

Code

Hover preview

Add hover-card to reveal each item’s details on hover — useful on grid, where the tile shows only the image.

Code

Lightbox

For a gallery where the point is looking at the picture, image-preview="lightbox" trades the hover card for a modal: click an image tile and it opens full-size, with Escape, a backdrop click or the close control to dismiss it. It applies to image items only; every other item keeps the hover card, so one container can serve a mixed set.

Code

The modal is the kit’s own Lightbox, which composes the kit’s Dialog: it portals through the host’s mount point, moves focus into the panel and restores it on close, traps Tab, and carries role="dialog" aria-modal. Nothing about it is a second modal implementation, so an attachment lightbox behaves like every other dialog in the kit for keyboard and screen-reader users.

Composing your own tile? The trio is public in the Solid entry:

<Lightbox>
  <LightboxTrigger>
    <AttachmentPreview />
  </LightboxTrigger>
  <LightboxContent label="Screenshot">
    <img src={url} alt="" class="block" />
  </LightboxContent>
</Lightbox>

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
items	AttachmentData[]	[]	The attachments to render (omit or pass `[]` for the empty state). Each `url` must be a `data:` URI or https URL, never `blob:`.
variant	"grid" | "inline" | "list"	'grid'	Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows.
hoverCard	boolean	false	Wrap each item in a hover card that previews its details.
imagePreview	"hover" | "lightbox"	'hover'	How an image tile reveals its full size: a pointer-only card by default, or a modal on click.
removable	boolean	false	Show a remove button per item; clicking it fires a `kai-remove` event.
showMediaType	boolean	false	Also show the media type beneath the filename (non-grid variants).
emptyText	string	—	Text shown when `items` is empty.

Events

Event	Detail	Notes
kai-remove	{ … }	A remove button was clicked.

Composed from

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

AttachmentsAttachmentAttachmentPreviewAttachmentInfoAttachmentRemoveAttachmentHoverCardAttachmentHoverCardTriggerAttachmentHoverCardContentAttachmentEmptyLightboxLightboxTriggerLightboxContent

---

Need a hand? Report a bug Ask for help