Empty
Displays a placeholder when there is no data or content to show, with configurable icon, title, description, and action slots for guiding users toward their next step.
Default
The default
Empty component displays an icon, title, and description centered in a flex container. Use the Icon render fragment to provide a visual cue, and the Title and Description string parameters for explanatory text.With Action
Add action buttons via
ChildContent to provide users with a clear next step from the empty state. This pattern is essential for onboarding flows where users need to create their first item, such as a project, document, or team.Sizes
Use the
Size parameter to control the empty state scale. Choose from EmptySize.Small for inline sections like card bodies, EmptySize.Default for main content areas, and EmptySize.Large for full-page empty states with maximum visual impact.Custom Variant
Use the
Class parameter to apply custom Tailwind classes to the container. Add a dashed border for drop-zone styling, a coloured background for themed sections, or rounded corners and shadows to match your layout. The icon colour can be overridden with utility classes on the LucideIcon.In Card
A real-world composition showing the
Empty component inside a Card container. Use EmptySize.Small for compact card layouts to maintain proportion. This pattern is common for notification panels, inbox views, or dashboard widgets that may have no data.