104Get started
HextaUI

Attachment: Group

<AttachmentGroup /> lays attachments out in a row that scrolls sideways, with edges that fade and items that snap into place.

import { IconFileZip } from "@tabler/icons-react"

import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

const files = Array.from(
  { length: 10 },
  (_, index) => `export-${index + 1}.zip`
)

export function AttachmentGroupDemo() {
  return (
    <AttachmentGroup className="w-full rounded-lg border">
      {files.map((name) => (
        <Attachment key={name}>
          <AttachmentMedia>
            <IconFileZip />
          </AttachmentMedia>
          <AttachmentContent>
            <AttachmentTitle>{name}</AttachmentTitle>
            <AttachmentDescription>ZIP · 18 MB</AttachmentDescription>
          </AttachmentContent>
        </Attachment>
      ))}
    </AttachmentGroup>
  )
}

Add this example

This adds the example as components/examples/attachment/group.tsx, together with the Attachment component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/attachment-group.json

To add only the component, follow the Attachment installation.

More Attachment examples

See them all, with keyboard support and accessibility notes, on the Attachment page.

Related components