Block

File Upload

Drag-and-drop upload zone with file type and size constraints. Use for attachments and media uploads.

Uses:CardButton

Playground

Preview
File Upload
Drag and drop or browse

Upload files

PNG, JPG, PDF up to 10MB

Configure

Code

<Card className="w-full max-w-sm shadow-xl">
  <CardHeader>
    <CardTitle>File Upload</CardTitle>
    <CardDescription>Drag and drop or browse</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex flex-col items-center justify-center gap-3 border border-dashed py-12 text-center">
      <Upload className="size-4 text-muted-foreground" />
      <p className="text-sm font-medium">Upload files</p>
      <p className="text-xs text-muted-foreground">PNG, JPG, PDF up to 10MB</p>
      <Button variant="outline" size="sm">Browse Files</Button>
    </div>
  </CardContent>
</Card>