a

RetroUI/content/docs/components/empty.mdx

@@ -0,0 +1,70 @@
+---
+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