Components / Attachment

Attachment

A file or image card for composers, threads, and upload lists. State drives the styling, including an automatic title shimmer while uploading or processing. Pure Tailwind, no behaviour required.

Examples

A row of attachments in a ZitsAttachmentGroup: a finished file, one still uploading, and one that failed.

roadmap.pdf 248 KB

screenshot.png Uploading, 62%

invoice.zip Upload failed, file too large

razor

<ZitsAttachmentGroup>
    <ZitsAttachment State="done">
        <ZitsAttachmentMedia>...</ZitsAttachmentMedia>
        <ZitsAttachmentContent>
            <ZitsAttachmentTitle>roadmap.pdf</ZitsAttachmentTitle>
            <ZitsAttachmentDescription>248 KB</ZitsAttachmentDescription>
        </ZitsAttachmentContent>
        <ZitsAttachmentActions>
            <ZitsAttachmentAction aria-label="Remove roadmap.pdf">...</ZitsAttachmentAction>
        </ZitsAttachmentActions>
    </ZitsAttachment>
</ZitsAttachmentGroup>

Installation

Terminal bash

navius add chat

API reference

ZitsAttachment (root):

Prop	Type	Default
State	string	"done"
Size	string	"default"
Orientation	string	"horizontal"

ZitsAttachmentMedia:

Prop	Type	Default
Variant	string	"icon"

ZitsAttachmentAction (defaults to a ghost icon-xs button, needs its own aria-label):

Prop	Type	Default
Variant	string	"ghost"
Size	string	"icon-xs"
OnClick	EventCallback<MouseEventArgs>	-

ZitsAttachmentTrigger (full-card overlay, opens a preview or link; also needs an aria-label):

Prop	Type	Default
OnClick	EventCallback<MouseEventArgs>	-

Parts

The trigger overlay sits behind the actions cluster (z-10 under z-20) so the card can open a preview while its buttons stay independently clickable.

Prop	Type	Default
ZitsAttachmentGroup	container	horizontally scrollable row, scroll-fade-x edge
ZitsAttachment	root	the card; State/Size/Orientation drive child styling
ZitsAttachmentMedia	slot	icon or image preview
ZitsAttachmentContent	slot	wraps the title and description
ZitsAttachmentTitle	slot	file name, shimmers while uploading or processing
ZitsAttachmentDescription	slot	type, size, or status metadata
ZitsAttachmentActions	slot	end-aligned action cluster (z-20)
ZitsAttachmentAction	slot	one icon action: remove, download, retry
ZitsAttachmentTrigger	slot	full-card overlay button (z-10, behind the actions)