Attachment
A file with its name, type, and attachment state.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Attachment
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/attachment.json'Usage
A complete example using the installed component and hook paths.
Attachment usage
"use client";import { FileTextIcon } from "@/lib/icons";import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle } from "@/components/ui/attachment";const AttachmentPreview = function AttachmentPreview() { return ( <Attachment> <AttachmentMedia> <FileTextIcon /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>example-tokens.json</AttachmentTitle> <AttachmentDescription>JSON · sample attachment</AttachmentDescription> </AttachmentContent> </Attachment> ); };export default function Demo() { return <AttachmentPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Attachment
Attachment props
React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & { state?: "idle" | "uploading" | "processing" | "error" | "done"; }- state
- "done"
- size
- "default"
- orientation
- "horizontal"
AttachmentGroup
AttachmentGroup props
React.ComponentProps<"div">AttachmentMedia
AttachmentMedia props
React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>- variant
- "icon"
AttachmentContent
AttachmentContent props
React.ComponentProps<"div">AttachmentTitle
AttachmentTitle props
React.ComponentProps<"span">AttachmentDescription
AttachmentDescription props
React.ComponentProps<"span">AttachmentActions
AttachmentActions props
React.ComponentProps<"div">AttachmentAction
AttachmentAction props
React.ComponentProps<typeof Button>- size
- "icon-xs"
AttachmentTrigger
AttachmentTrigger props
useRender.ComponentProps<"button"> & { sound?: boolean }- sound
- true