Tile UI React
Source code

Components

Attachment

Attachment primitives.

Use Attachment to display uploaded files with state and actions.

report.pdf2.4 MB
import { Attachment, AttachmentMedia, AttachmentFileIcon, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, Button } from '@tile-ui/react';

export default function AttachmentDemo() {
	return (
		<Attachment>
			<AttachmentMedia>

Registry install

pnpm dlx shadcn@latest add @tile-ui/attachment

Package usage

import { Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, Button } from '@tile-ui/react';
 
<Attachment>
	<AttachmentMedia>+</AttachmentMedia>
	<AttachmentContent>
		<AttachmentTitle>report.pdf</AttachmentTitle>
		<AttachmentDescription>2.4 MB</AttachmentDescription>
	</AttachmentContent>
	<AttachmentActions>
		<Button size="sm">Download</Button>
	</AttachmentActions>
</Attachment>

Highlights

  • States like uploading and error
  • Sizes and orientation
  • Media, content, and actions

Registry dependencies

ItemPurpose
attachmentComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Attachment

PropTypeDefault
state'idle' | 'uploading' | 'processing' | 'error' | 'done'—
size'default' | 'sm' | 'xs'—
orientation'horizontal' | 'vertical'—

AttachmentCard

PropTypeDefault
namestring—
sizenumber—
state'idle' | 'uploading' | 'processing' | 'error' | 'done'—
orientation'horizontal' | 'vertical'—
downloadingboolean—
PreviousAspectRatioNextAvatar