Skip to content

ComponentsAttachment

Components

Attachment

Composer tray tiles, images above a user bubble and file rows: pending, error, remove and the enter / exit motion.

Tiles

120×120, radius 10 | 9, page-colour fill, a 1×2 drop and an inset hairline ring. The remove button (20px circle at −8/−8) shows on hover / focus and always on touch; Delete or Backspace on a focused tile removes it and moves focus to the next. New tray tiles enter from .92 / +4px over 180 ms.

Composer tray

# Report Revenue grew 12 % quarter over quarter, driven by the new plan. Churn stayed flat; the pricing test ends next week.

md
csvLoading
Error (Retry)

# Draft An outline of the proposal with the open questions for the review meeting.

Failed
Light
ts

Failed upload preview text

Failed
Dark
ts

Failed upload preview text

Failed

Above a user bubble

Natural images keep their aspect: one image ≤ 480×320, two or more ≤ 240×160 each (≤ 50 % − 4px), at least 120×120; images come first, file tiles after a forced line break; right-aligned with 8px gaps.

One image
What colours are in this picture?
Several images + a file

# Notes Compare the palettes of these photos.

md
Compare these.
Thumb fit (≤ 288×120)

Row (kit extra)

The generated shadcn file row, kept as variant="row" with cds tokens: sizes default / sm / xs, horizontal or vertical.

Rows
quarterly-report.pdfPDF · 2.4 MB
quarterly-report.pdfPDF · 2.4 MB
quarterly-report.pdfPDF · 2.4 MB
upload.zipUploading…