Empty

The component that shows when there is no data to show!

Source

No Results

Your search didn't match any items. Try adjusting your filters.



Installation

pnpm dlx shadcn@latest add @retroui/empty


Examples

Default

No Results

Your search didn't match any items. Try adjusting your filters.



Custom Icon

👻

No data

There is nothing to show here yet. Imagine you wrote some good stuff here.



Customize everything

No data

Get started by creating your first item



Using with table

InvoiceCustomerStatusMethodAmount

Empty

Get started by creating your first invoice.



API Reference

The Empty component is composed of several sub-components:


  • Empty - The main component wrapper
  • Empty.Content - Wrapper for the content elements
  • Empty.Icon - Section for displaying an icon
  • Empty.Title - The main heading for the empty state
  • Empty.Separator - A visual separator line
  • Empty.Description - Supporting text for the empty state

Last Updated: 13 Jan, 2026