Ubuntu
71 lines
1.3 KiB
Plaintext
71 lines
1.3 KiB
Plaintext
---
|
|
title: Empty
|
|
description: The component that shows when there is no data to show!
|
|
lastUpdated: 13 Jan, 2026
|
|
links:
|
|
source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Empty.tsx
|
|
---
|
|
|
|
<ComponentShowcase name="empty-style-default" />
|
|
|
|
<br />
|
|
<br />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstall>
|
|
<ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/empty" />
|
|
<ComponentInstall.Manual>
|
|
|
|
#### Copy the code 👇 into your project:
|
|
|
|
<ComponentSource name="empty" />
|
|
</ComponentInstall.Manual>
|
|
</ComponentInstall>
|
|
|
|
<br />
|
|
<br />
|
|
|
|
## Examples
|
|
|
|
### Default
|
|
|
|
<ComponentShowcase name="empty-style-default" />
|
|
|
|
<br />
|
|
<br />
|
|
|
|
### Custom Icon
|
|
|
|
<ComponentShowcase name="empty-style-custom-icon" />
|
|
|
|
<br />
|
|
<br />
|
|
|
|
### Customize everything
|
|
|
|
<ComponentShowcase name="empty-style-custom-everything" />
|
|
|
|
<br />
|
|
<br />
|
|
|
|
### Using with table
|
|
|
|
<ComponentShowcase name="empty-style-table" />
|
|
|
|
<br />
|
|
<br />
|
|
|
|
## API Reference
|
|
|
|
The Empty component is composed of several sub-components:
|
|
|
|
<br />
|
|
|
|
- `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
|