A picture fills the tile. A well-known document format wears a coloured mark, and every other file wears its extension as a neutral badge. Under the mark sit the name, cut in the middle so the extension survives, and one line for the size or the state. The same tile serves a composer’s queue and a sent message.
Every kind, every state
Each row is a kind of file and each column is a state. The mark, the spinner and the state icons all fill the same square at the same seat, so a file changing state never moves anything.
Pasted textPaid time off policy (2026)
Full-time employees accrue 1.5 days of PTO per month, credited on the first working day.PASTED
Pasted textPasted textUploading…
errorPasted textPasted textPaste failed
blockPasted textPasted textUnavailable
Any other type
KEYQ4 plan.keyQ4 plan.key3.4 MB
Q4 plan.keyQ4 plan.keyUploading…
errorQ4 plan.keyQ4 plan.keyUpload failed
blockQ4 plan.keyQ4 plan.keyUnavailable
Well-known formats
PDFs, spreadsheets, documents and presentations each keep the colour they are known by, in every theme. The lettering under the mark is drawn in a text colour, so it stays readable whatever the format colour is.
Contract.pdfContract.pdf1.2 MB
Q4 roadmap.xlsxQ4 roadmap.xlsx88 KB
Weekly notes.docxWeekly notes.docx54 KB
Kickoff deck.pptxKickoff deck.pptx5.6 MB
Everything else
Any other file wears its extension as a neutral badge. Colour stays a signal for the formats a reader recognises at a glance.
MP3voice-note.mp3voice-note.mp32.1 MB
MDexport.mdexport.md4 KB
ZIPassets.zipassets.zip18.4 MB
KEYQ4 plan.keyQ4 plan.key3.4 MB
Previews
A picture fills the tile. A document can do the same with a first page the host has rendered, and keeps its format as a badge over the corner. The library draws no documents itself: pass the image in.
PDF
Pasted textPaid time off policy (2026)
Full-time employees accrue 1.5 days of PTO per month, credited on the first working day.PASTED
Removable and clickable
Click and remove are separate controls, so opening a file never fights with detaching it. The remove button appears on hover and on focus, and stays visible on a file that failed. Try removing these.
Compact
Compact shrinks the square and drops the second line of a ready file, for a dense thread.
Contract.pdfContract.pdf
KEYQ4 plan.keyQ4 plan.key
Q4 roadmap.xlsxQ4 roadmap.xlsxUploading…
tsx
// From the npm package
import { AttachmentTile } from 'rift-ds/components/AttachmentTile/AttachmentTile';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/attachment-tile.json
