# Attachment: Long names

> Long file names truncate before the extension, so people can still tell a .pdf from a .zip. Hover the name to read it in full.

Example: https://hextaui.com/docs/attachment/examples/long-names
Component docs: https://hextaui.com/docs/attachment.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/attachment-long-names.json
```

This adds `components/examples/attachment/long-names.tsx` with the Attachment component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/attachment/long-names.tsx"
import { IconFileText } from "@tabler/icons-react"

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

export function AttachmentLongNames() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Attachment>
        <AttachmentMedia>
          <IconFileText />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>
            quarterly-sales-report-final-v3-approved-by-finance.pdf
          </AttachmentTitle>
          <AttachmentDescription>PDF · 5.2 MB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
      <Attachment>
        <AttachmentMedia>
          <IconFileText />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>
            a-file-without-any-extension-at-all-just-a-long-name
          </AttachmentTitle>
          <AttachmentDescription>File · 12 KB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
    </div>
  )
}
```

## More Attachment examples

- [Image](https://hextaui.com/docs/attachment/examples/image.md)
- [States](https://hextaui.com/docs/attachment/examples/states.md)
- [Upload flow](https://hextaui.com/docs/attachment/examples/upload-flow.md)
- [Sizes](https://hextaui.com/docs/attachment/examples/sizes.md)
- [Group](https://hextaui.com/docs/attachment/examples/group.md)
- [Trigger](https://hextaui.com/docs/attachment/examples/trigger.md)
- [Composer](https://hextaui.com/docs/attachment/examples/composer.md)
- [Broken image](https://hextaui.com/docs/attachment/examples/broken-image.md)
- [Stress](https://hextaui.com/docs/attachment/examples/stress.md)
- [Right to left](https://hextaui.com/docs/attachment/examples/rtl.md)