Empty
@/components/kamod-ui/empty
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Installation
Import Empty and subcomponents from `@/components/kamod-ui/empty` (EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent).
pnpm add @kamod-ch/uiUsage
Compose media, title, and description in EmptyHeader; primary actions in EmptyContent. Add border or background via class on Empty. Legacy API: pass title and description props for quick dashed cards.
import { Empty } from "@/components/kamod-ui/empty";<Empty />Demo
Icon, title, description, actions, and footer link (shadcn EmptyDemo).
Usage
Minimal structure.
No data
No data found
Legacy props
title + description + children (dashed border) for quick screens.
No projects yet
Create your first project to get started.
Legacy + action
Children render below description.
No invoices
Create an invoice to start billing customers.
Outline
border border-dashed on Empty (shadcn Outline).
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
Background
Muted panel height (shadcn Background).
No Notifications
You're all caught up. New notifications will appear here.
Avatar
EmptyMedia variant default for larger media (shadcn Avatar).
CNUser Offline
This user is currently offline. Try again later.
Avatar group
Stacked avatars in EmptyMedia (shadcn Avatar Group).
CN
ML
ERNo Team Members
Invite your team to collaborate on this project.
Input group
Search UI inside EmptyContent (shadcn InputGroup).
404 - Not Found
The page you're looking for doesn't exist. Try searching below.
Need help? Contact support
API Reference
Props, slots and variants for this component.
Empty
Empty component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| title / description | ComponentChildren | legacy only |
| EmptyMedia variant | "default" | "icon" | "default" |
| class | string | outline/background via utilities |
Accessibility Notes
Use EmptyTitle as a heading; keep actions labeled. For icon-only media, set aria-hidden on decorative SVGs and provide meaningful title/description text.