Tile UI Vue
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/vue';
 
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/vue';
 
<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

Item Purpose
attachment Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Attachment

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

AttachmentCard

Prop Type Default
name string —
size number —
state 'idle' | 'uploading' | 'processing' | 'error' | 'done' —
orientation 'horizontal' | 'vertical' —
downloading boolean —
PreviousAspectRatioNextAvatar