Ashen Legal Empty State

Ashen Legal Empty State

A professional empty state for legal tech and document management platforms.

Features

• Illustration area — Large icon with floating accent elements
• Empty state messaging — Headline, description, and document count badge
• Primary CTA — Upload Document button with indigo accent
• Secondary action — Browse Templates outline button
• Drag & drop zone — Dashed border file drop area with hover states
• Tips section — 3 getting-started cards (Upload, Search, Import)
• Professional palette — Cool gray (#f1f5f9) with slate text and indigo CTA accent
• Dark mode — Slate-950 bg, slate-300 text, indigo-400 accent

Dependencies

• @/components/vue-ui/card — Main card and tip cards
• @/components/vue-ui/badge — Document count badge
• @/components/vue-ui/button — CTA and navigation buttons
• @/components/vue-ui/separator — Section divider
• lucide-vue-next — Icons

Customization

• Edit tips array for different getting-started content
• Change the headline and description for your specific empty state
• Adjust accepted file types in the drop zone text
• Replace icon composition with your own illustration or SVG