Empty

1
import { ArrowUpRightIcon, FolderCodeIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import {
4
  Empty,
5
  EmptyContent,
6
  EmptyDescription,
7
  EmptyHeader,
8
  EmptyMedia,
9
  EmptyTitle,
10
} from "~/components/ui/empty";
11

12
export default function EmptyDemo() {
13
  return (
14
    <Empty>
15
      <EmptyHeader>
16
        <EmptyMedia variant="icon">
17
          <FolderCodeIcon />
18
        </EmptyMedia>
19
        <EmptyTitle>No Projects Yet</EmptyTitle>
20
        <EmptyDescription>
21
          You haven&apos;t created any projects yet. Get started by creating your first project.
22
        </EmptyDescription>
23
      </EmptyHeader>
24
      <EmptyContent class="flex-row justify-center gap-2">
25
        <Button>Create Project</Button>
26
        <Button variant="outline">Import Project</Button>
27
      </EmptyContent>
28
      <Button variant="link" as="a" href="#" class="text-muted-foreground" size="sm">
29
        Learn More <ArrowUpRightIcon />
30
      </Button>
31
    </Empty>
32
  );
33
}

1
import { CloudIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import {
4
  Empty,
5
  EmptyContent,
6
  EmptyDescription,
7
  EmptyHeader,
8
  EmptyMedia,
9
  EmptyTitle,
10
} from "~/components/ui/empty";
11

12
export default function EmptyOutline() {
13
  return (
14
    <Empty class="border border-dashed">
15
      <EmptyHeader>
16
        <EmptyMedia variant="icon">
17
          <CloudIcon />
18
        </EmptyMedia>
19
        <EmptyTitle>Cloud Storage Empty</EmptyTitle>
20
        <EmptyDescription>
21
          Upload files to your cloud storage to access them anywhere.
22
        </EmptyDescription>
23
      </EmptyHeader>
24
      <EmptyContent>
25
        <Button variant="outline" size="sm">
26
          Upload Files
27
        </Button>
28
      </EmptyContent>
29
    </Empty>
30
  );
31
}

1
import { BellIcon, RefreshCcwIcon } from "lucide-solid";
2
import { Button } from "~/components/ui/button";
3
import {
4
  Empty,
5
  EmptyContent,
6
  EmptyDescription,
7
  EmptyHeader,
8
  EmptyMedia,
9
  EmptyTitle,
10
} from "~/components/ui/empty";
11

12
export default function EmptyBackground() {
13
  return (
14
    <Empty class="h-full bg-muted/30">
15
      <EmptyHeader>
16
        <EmptyMedia variant="icon">
17
          <BellIcon />
18
        </EmptyMedia>
19
        <EmptyTitle>No Notifications</EmptyTitle>
20
        <EmptyDescription class="max-w-xs text-pretty">
21
          You&apos;re all caught up. New notifications will appear here.
22
        </EmptyDescription>
23
      </EmptyHeader>
24
      <EmptyContent>
25
        <Button variant="outline">
26
          <RefreshCcwIcon data-icon="inline-start" />
27
          Refresh
28
        </Button>
29
      </EmptyContent>
30
    </Empty>
31
  );
32
}

1
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
2
import { Button } from "~/components/ui/button";
3
import {
4
  Empty,
5
  EmptyContent,
6
  EmptyDescription,
7
  EmptyHeader,
8
  EmptyMedia,
9
  EmptyTitle,
10
} from "~/components/ui/empty";
11

12
export default function EmptyAvatar() {
13
  return (
14
    <Empty>
15
      <EmptyHeader>
16
        <EmptyMedia variant="default">
17
          <Avatar class="size-12">
18
            <AvatarImage src="https://github.com/shadcn.png" class="grayscale" />
19
            <AvatarFallback>LR</AvatarFallback>
20
          </Avatar>
21
        </EmptyMedia>
22
        <EmptyTitle>User Offline</EmptyTitle>
23
        <EmptyDescription>
24
          This user is currently offline. You can leave a message to notify them or try again later.
25
        </EmptyDescription>
26
      </EmptyHeader>
27
      <EmptyContent>
28
        <Button size="sm">Leave Message</Button>
29
      </EmptyContent>
30
    </Empty>
31
  );
32
}

1
import { PlusIcon } from "lucide-solid";
2
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
3
import { Button } from "~/components/ui/button";
4
import {
5
  Empty,
6
  EmptyContent,
7
  EmptyDescription,
8
  EmptyHeader,
9
  EmptyMedia,
10
  EmptyTitle,
11
} from "~/components/ui/empty";
12

13
export default function EmptyAvatarGroup() {
14
  return (
15
    <Empty>
16
      <EmptyHeader>
17
        <EmptyMedia>
18
          <div class="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
19
            <Avatar>
20
              <AvatarImage src="https://github.com/carere.png" alt="@carere" />
21
              <AvatarFallback>CR</AvatarFallback>
22
            </Avatar>
23
            <Avatar>
24
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
25
              <AvatarFallback>CN</AvatarFallback>
26
            </Avatar>
27
            <Avatar>
28
              <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
29
              <AvatarFallback>ER</AvatarFallback>
30
            </Avatar>
31
          </div>
32
        </EmptyMedia>
33
        <EmptyTitle>No Team Members</EmptyTitle>
34
        <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>
35
      </EmptyHeader>
36
      <EmptyContent>
37
        <Button size="sm">
38
          <PlusIcon />
39
          Invite Members
40
        </Button>
41
      </EmptyContent>
42
    </Empty>
43
  );
44
}

1
/** biome-ignore-all lint/a11y/useValidAnchor: <example file> */
2
import { SearchIcon } from "lucide-solid";
3
import {
4
  Empty,
5
  EmptyContent,
6
  EmptyDescription,
7
  EmptyHeader,
8
  EmptyTitle,
9
} from "~/components/ui/empty";
10
import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
11
import { Kbd } from "~/components/ui/kbd";
12

13
export default function EmptyInputGroup() {
14
  return (
15
    <Empty>
16
      <EmptyHeader>
17
        <EmptyTitle>404 - Not Found</EmptyTitle>
18
        <EmptyDescription>
19
          The page you&apos;re looking for doesn&apos;t exist. Try searching for what you need
20
          below.
21
        </EmptyDescription>
22
      </EmptyHeader>
23
      <EmptyContent>
24
        <InputGroup class="sm:w-3/4">
25
          <InputGroupInput placeholder="Try searching for pages..." />
26
          <InputGroupAddon>
27
            <SearchIcon />
28
          </InputGroupAddon>
29
          <InputGroupAddon align="inline-end">
30
            <Kbd>/</Kbd>
31
          </InputGroupAddon>
32
        </InputGroup>
33
        <EmptyDescription>
34
          Need help? <a href="#">Contact support</a>
35
        </EmptyDescription>
36
      </EmptyContent>
37
    </Empty>
38
  );
39
}