Empty Collection

Empty state placeholder with icon, message, and action button.

Preview

Empty state collection

Use empty states to guide users when there’s no data yet.

No files yet
Upload your first file to get started.
No activity
Your activity timeline will appear here.
No experiments
Create a new test to track performance.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/empty-collection.json

Usage

empty-collection-demo.tsx
import EmptyCollection from "@/components/blocks/empty-collection"

export default function EmptyCollectionDemo() {
  return (
    <EmptyCollection
      // Update headline and description for your empty state group.
      title="Empty state collection"
      description="Use empty states to guide users when there’s no data yet."
    />
  )
}
0