Zaidan

Empty

Use the Empty component to display an empty state.

Installation

CLI

npx shadcn@latest add @zaidan/empty

pnpx shadcn add @zaidan/empty

yarn dlx shadcn@latest add @zaidan/empty

bunx shadcn@latest add @zaidan/empty

Manual

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { ComponentProps } from "solid-js";
3
import { splitProps } from "solid-js";
4
import { cn } from "~/lib/utils";
5

6
type EmptyProps = ComponentProps<"div">;
7

8
const Empty = (props: EmptyProps) => {
9
  const [local, others] = splitProps(props, ["class"]);
10

11
  return (
12
    <div
13
      data-slot="empty"
14
      class={cn(
15
        "z-empty flex w-full min-w-0 flex-1 flex-col items-center justify-center text-balance text-center",
16
        local.class,
17
      )}
18
      {...others}
19
    />
20
  );
21
};
22

23
type EmptyHeaderProps = ComponentProps<"div">;
24

25
const EmptyHeader = (props: EmptyHeaderProps) => {
26
  const [local, others] = splitProps(props, ["class"]);
27

28
  return (
29
    <div
30
      data-slot="empty-header"
31
      class={cn("z-empty-header flex max-w-sm flex-col items-center", local.class)}
32
      {...others}
33
    />
34
  );
35
};
36

37
const emptyMediaVariants = cva(
38
  "z-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
39
  {
40
    variants: {
41
      variant: {
42
        default: "z-empty-media-default",
43
        icon: "z-empty-media-icon",
44
      },
45
    },
46
    defaultVariants: {
47
      variant: "default",
48
    },
49
  },
50
);
51

52
type EmptyMediaProps = ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>;
53

54
const EmptyMedia = (props: EmptyMediaProps) => {
55
  const [local, others] = splitProps(props, ["class", "variant"]);
56

57
  return (
58
    <div
59
      data-slot="empty-icon"
60
      data-variant={local.variant}
61
      class={cn(emptyMediaVariants({ variant: local.variant }), local.class)}
62
      {...others}
63
    />
64
  );
65
};
66

67
type EmptyTitleProps = ComponentProps<"div">;
68

69
const EmptyTitle = (props: EmptyTitleProps) => {
70
  const [local, others] = splitProps(props, ["class"]);
71

72
  return <div data-slot="empty-title" class={cn("z-empty-title", local.class)} {...others} />;
73
};
74

75
type EmptyDescriptionProps = ComponentProps<"p">;
76

77
const EmptyDescription = (props: EmptyDescriptionProps) => {
78
  const [local, others] = splitProps(props, ["class"]);
79

80
  return (
81
    <div
82
      data-slot="empty-description"
83
      class={cn(
84
        "z-empty-description text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
85
        local.class,
86
      )}
87
      {...others}
88
    />
89
  );
90
};
91

92
type EmptyContentProps = ComponentProps<"div">;
93

94
const EmptyContent = (props: EmptyContentProps) => {
95
  const [local, others] = splitProps(props, ["class"]);
96

97
  return (
98
    <div
99
      data-slot="empty-content"
100
      class={cn(
101
        "z-empty-content flex w-full min-w-0 max-w-sm flex-col items-center text-balance",
102
        local.class,
103
      )}
104
      {...others}
105
    />
106
  );
107
};
108

109
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { ArrowUpRight } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "~/components/ui/empty";
import { Button } from "~/components/ui/button";

function EmptyBasic() {
  return (
    <Example title="Basic">
      <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 class="flex gap-2">
            <Button as="a" href="#">
              Create project
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" as="a" href="#" class="text-muted-foreground">
            Learn more <ArrowUpRight />
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

With Muted Background

import { ArrowUpRight } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "~/components/ui/empty";
import { Button } from "~/components/ui/button";

function EmptyWithMutedBackground() {
  return (
    <Example title="With Muted Background">
      <Empty class="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" as="a" href="#" class="text-muted-foreground">
            Learn more <ArrowUpRight />
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

With Border

import { CircleDashed } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "~/components/ui/empty";
import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
import { Kbd } from "~/components/ui/kbd";

function EmptyWithBorder() {
  return (
    <Example title="With Border">
      <Empty class="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 class="w-3/4">
            <InputGroupInput placeholder="Try searching for pages..." />
            <InputGroupAddon>
              <CircleDashed />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <Kbd>/</Kbd>
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

With Icon

import { Folder, Plus } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "~/components/ui/empty";
import { Button } from "~/components/ui/button";

function EmptyWithIcon() {
  return (
    <Example title="With Icon">
      <Empty class="border">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <Folder />
          </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">
            <Plus />
            New Post
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

With Muted Background Alt

import { CircleDashed } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "~/components/ui/empty";
import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
import { Kbd } from "~/components/ui/kbd";

function EmptyWithMutedBackgroundAlt() {
  return (
    <Example title="With Muted Background Alt">
      <Empty class="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 class="w-3/4">
            <InputGroupInput placeholder="Try searching for pages..." />
            <InputGroupAddon>
              <CircleDashed />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <Kbd>/</Kbd>
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

In Card

import { ArrowUpRight, Folder } from "lucide-solid";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "~/components/ui/empty";
import { Button } from "~/components/ui/button";

function EmptyInCard() {
  return (
    <Example title="In Card">
      <Empty>
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <Folder />
          </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 class="flex gap-2">
            <Button as="a" href="#">
              Create project
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" as="a" href="#" class="text-muted-foreground">
            Learn more <ArrowUpRight />
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.