Empty | Cortexcn

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Installation

pnpm dlx shadcn@latest add @cortexcn/empty

pnpm dlx shadcn@latest add @cortexcn/empty

Usage

import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "@/components/empty";

Examples

Basic

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Create project

Learn more

import { Button } from "@/components/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"
import { ArrowUpRightIcon } from "lucide-react"

export function EmptyBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Empty>
        <EmptyHeader>
          <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 asChild>
              <a href="#">Create project</a>
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" asChild className="text-muted-foreground">
            <a href="#">
              Learn more{" "}
              <ArrowUpRightIcon />
            </a>
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"import { ArrowUpRightIcon } from "lucide-react"export function EmptyBasic() {  return (    <div className="flex flex-col gap-6">      <Empty>        <EmptyHeader>          <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 asChild>              <a href="#">Create project</a>            </Button>            <Button variant="outline">Import project</Button>          </div>          <Button variant="link" asChild className="text-muted-foreground">            <a href="#">              Learn more{" "}              <ArrowUpRightIcon />            </a>          </Button>        </EmptyContent>      </Empty>    </div>  )}

With muted background

No results found

No results found for your search. Try adjusting your search terms.

Learn more

import { Button } from "@/components/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"
import { ArrowUpRightIcon } from "lucide-react"

export function EmptyWithMutedBackground() {
  return (
    <div className="flex flex-col gap-6">
      <Empty className="bg-muted">
        <EmptyHeader>
          <EmptyTitle>No results found</EmptyTitle>
          <EmptyDescription>
            No results found for your search. Try adjusting your search terms.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button>Try again</Button>
          <Button variant="link" asChild className="text-muted-foreground">
            <a href="#">
              Learn more{" "}
              <ArrowUpRightIcon />
            </a>
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"import { ArrowUpRightIcon } from "lucide-react"export function EmptyWithMutedBackground() {  return (    <div className="flex flex-col gap-6">      <Empty className="bg-muted">        <EmptyHeader>          <EmptyTitle>No results found</EmptyTitle>          <EmptyDescription>            No results found for your search. Try adjusting your search terms.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <Button>Try again</Button>          <Button variant="link" asChild className="text-muted-foreground">            <a href="#">              Learn more{" "}              <ArrowUpRightIcon />            </a>          </Button>        </EmptyContent>      </Empty>    </div>  )}

With border

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"
import { Kbd } from "@/components/kbd"
import { CircleDashedIcon } from "lucide-react"

export function EmptyWithBorder() {
  return (
    <div className="flex flex-col gap-6">
      <Empty className="border">
        <EmptyHeader>
          <EmptyTitle>404 - Not Found</EmptyTitle>
          <EmptyDescription>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <InputGroup className="w-3/4">
            <InputGroupInput placeholder="Try searching for pages..." />
            <InputGroupAddon>
              <CircleDashedIcon />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <Kbd>/</Kbd>
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"import { Kbd } from "@/components/kbd"import { CircleDashedIcon } from "lucide-react"export function EmptyWithBorder() {  return (    <div className="flex flex-col gap-6">      <Empty className="border">        <EmptyHeader>          <EmptyTitle>404 - Not Found</EmptyTitle>          <EmptyDescription>            The page you&apos;re looking for doesn&apos;t exist. Try searching            for what you need below.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <InputGroup className="w-3/4">            <InputGroupInput placeholder="Try searching for pages..." />            <InputGroupAddon>              <CircleDashedIcon />            </InputGroupAddon>            <InputGroupAddon align="inline-end">              <Kbd>/</Kbd>            </InputGroupAddon>          </InputGroup>          <EmptyDescription>            Need help? <a href="#">Contact support</a>          </EmptyDescription>        </EmptyContent>      </Empty>    </div>  )}

With icon

Nothing to see here

No posts have been created yet. Get started by creating your first post.

import { Button } from "@/components/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"
import { FolderIcon, PlusIcon } from "lucide-react"

export function EmptyWithIcon() {
  return (
    <div className="flex flex-col gap-6">
      <Empty className="border">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <FolderIcon />
          </EmptyMedia>
          <EmptyTitle>Nothing to see here</EmptyTitle>
          <EmptyDescription>
            No posts have been created yet. Get started by{" "}
            <a href="#">creating your first post</a>.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline">
            <PlusIcon data-icon="inline-start" />
            New Post
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"import { FolderIcon, PlusIcon } from "lucide-react"export function EmptyWithIcon() {  return (    <div className="flex flex-col gap-6">      <Empty className="border">        <EmptyHeader>          <EmptyMedia variant="icon">            <FolderIcon />          </EmptyMedia>          <EmptyTitle>Nothing to see here</EmptyTitle>          <EmptyDescription>            No posts have been created yet. Get started by{" "}            <a href="#">creating your first post</a>.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <Button variant="outline">            <PlusIcon data-icon="inline-start" />            New Post          </Button>        </EmptyContent>      </Empty>    </div>  )}

With muted background alt

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"
import { Kbd } from "@/components/kbd"
import { CircleDashedIcon } from "lucide-react"

export function EmptyWithMutedBackgroundAlt() {
  return (
    <div className="flex flex-col gap-6">
      <Empty className="bg-muted/50">
        <EmptyHeader>
          <EmptyTitle>404 - Not Found</EmptyTitle>
          <EmptyDescription>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <InputGroup className="w-3/4">
            <InputGroupInput placeholder="Try searching for pages..." />
            <InputGroupAddon>
              <CircleDashedIcon />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <Kbd>/</Kbd>
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/empty"import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"import { Kbd } from "@/components/kbd"import { CircleDashedIcon } from "lucide-react"export function EmptyWithMutedBackgroundAlt() {  return (    <div className="flex flex-col gap-6">      <Empty className="bg-muted/50">        <EmptyHeader>          <EmptyTitle>404 - Not Found</EmptyTitle>          <EmptyDescription>            The page you&apos;re looking for doesn&apos;t exist. Try searching            for what you need below.          </EmptyDescription>        </EmptyHeader>        <EmptyContent>          <InputGroup className="w-3/4">            <InputGroupInput placeholder="Try searching for pages..." />            <InputGroupAddon>              <CircleDashedIcon />            </InputGroupAddon>            <InputGroupAddon align="inline-end">              <Kbd>/</Kbd>            </InputGroupAddon>          </InputGroup>          <EmptyDescription>            Need help? <a href="#">Contact support</a>          </EmptyDescription>        </EmptyContent>      </Empty>    </div>  )}

In card

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Create project

Learn more

import { Button } from "@/components/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"
import { ArrowUpRightIcon, FolderIcon } from "lucide-react"

export function EmptyInCard() {
  return (
    <div className="flex flex-col gap-6">
      <Empty>
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <FolderIcon />
          </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 asChild>
              <a href="#">Create project</a>
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" asChild className="text-muted-foreground">
            <a href="#">
              Learn more{" "}
              <ArrowUpRightIcon />
            </a>
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { Button } from "@/components/button"import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/empty"import { ArrowUpRightIcon, FolderIcon } from "lucide-react"export function EmptyInCard() {  return (    <div className="flex flex-col gap-6">      <Empty>        <EmptyHeader>          <EmptyMedia variant="icon">            <FolderIcon />          </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 asChild>              <a href="#">Create project</a>            </Button>            <Button variant="outline">Import project</Button>          </div>          <Button variant="link" asChild className="text-muted-foreground">            <a href="#">              Learn more{" "}              <ArrowUpRightIcon />            </a>          </Button>        </EmptyContent>      </Empty>    </div>  )}

Adapted from the shadcn/ui Empty (MIT).