Components / Feedback
EmptyState
Placeholder for empty collections and panels.
Preview
No results
Try adjusting filters or create a new item.
1import { EmptyState } from "@/components/ui/empty-state"2import { Button } from "@/components/ui/button"3
4export function EmptyStateDemo() {5 return (6 <EmptyState7 title="No results"8 description="Try adjusting filters."9 action={<Button size="sm">Create</Button>}10 />11 )12}sm
The sm style of this component.
No results
Try adjusting filters or create a new item.
1import { EmptyState } from "@/components/ui/empty-state"2import { Button } from "@/components/ui/button"3
4export function EmptyStateDemo() {5 return (6 <EmptyState7 title="No results"8 description="Try adjusting filters."9 action={<Button size="sm">Create</Button>}10 />11 )12}lg
The lg style of this component.
No results
Try adjusting filters or create a new item.
1import { EmptyState } from "@/components/ui/empty-state"2import { Button } from "@/components/ui/button"3
4export function EmptyStateDemo() {5 return (6 <EmptyState7 title="No results"8 description="Try adjusting filters."9 action={<Button size="sm">Create</Button>}10 />11 )12}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/empty-stateUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.