Ember UI LogoEmber UI
Components

Empty

A empty component

Preview

Loading...
import { ArrowUpRightIcon, FolderCodeIcon } from "lucide-react";import { Button } from "@/registry/axon/ui/button";import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from "@/registry/axon/ui/empty";export default function EmptyDemo() {  return (    <Empty>      <EmptyHeader>        <EmptyMedia variant="icon">          <FolderCodeIcon />        </EmptyMedia>        <EmptyTitle>No Projects Yet</EmptyTitle>        <EmptyDescription>          You haven&apos;t created any projects yet. Get started by creating          your first project.        </EmptyDescription>      </EmptyHeader>      <EmptyContent>        <div className="flex gap-2">          <Button>Create Project</Button>          <Button variant="outline">Import Project</Button>        </div>      </EmptyContent>      <Button        asChild        className="text-muted-foreground"        size="sm"        variant="link"      >        <a href="#">          Learn More <ArrowUpRightIcon />        </a>      </Button>    </Empty>  );}

Installation

CLI

npx shadcn@latest add @emberui/empty
yarn shadcn@latest add @emberui/empty
pnpm dlx shadcn@latest add @emberui/empty
bunx --bun shadcn@latest add @emberui/empty

Reference

This component is based on the shadcn/ui Empty component.

On this page