The files on a sent message
One picture keeps its own shape. Anything else becomes a grid of square tiles on the sender’s side, above the text. Past four files the grid folds the rest behind a count and opens in place. Pressing a file opens it in the viewer.
In a message
Pass the group to a chat message and it sits outside the bubble, above the text. Pictures and files share one grid.
A single picture
One picture is not squared off. A wide screenshot stays wide, and a tall receipt is capped in height so it cannot take over the thread.
More than four
The last cell stands for the files behind it. Press it and the grid expands where it is, with a button underneath to fold it again.
Files that have gone
A file that has expired stays on the message as a record of what was sent. It opens nothing.
// From the npm package
import { AttachmentGroup } from 'rift-ds/components/AttachmentGroup/AttachmentGroup';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/attachment-group.json