Empty

Give empty lists, first-run screens, and errors a clear next step with media, a title, supporting text, and actions.

No Projects Yet

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

tsx

1import { Button } from "@/components/ui/button"2import {3  Empty,4  EmptyContent,5  EmptyDescription,6  EmptyHeader,7  EmptyMedia,8  EmptyTitle,9} from "@/components/ui/empty"1011function FolderIcon(props: React.SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />15      <path d="M12 10v6" />16      <path d="M9 13h6" />17    </svg>18  )19}2021function ArrowUpRightIcon(props: React.SVGProps<SVGSVGElement>) {22  return (23    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>24      <path d="M7 7h10v10" />25      <path d="M7 17 17 7" />26    </svg>27  )28}2930export function Example() {31  return (32    <Empty>33      <EmptyHeader>34        <EmptyMedia variant="icon">35          <FolderIcon />36        </EmptyMedia>37        <EmptyTitle>No Projects Yet</EmptyTitle>38        <EmptyDescription>39          You haven&apos;t created any projects yet. Get started by creating40          your first project.41        </EmptyDescription>42      </EmptyHeader>43      <EmptyContent>44        <div className="flex gap-2">45          <Button>Create Project</Button>46          <Button variant="secondary">Import Project</Button>47        </div>48        <Button variant="link" className="text-muted-foreground">49          Learn More <ArrowUpRightIcon className="size-3.5" />50        </Button>51      </EmptyContent>52    </Empty>53  )54}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add empty

Usage

1import {2  Empty,3  EmptyContent,4  EmptyDescription,5  EmptyHeader,6  EmptyMedia,7  EmptyTitle,8} from "@/components/ui/empty"

1<Empty>2  <EmptyHeader>3    <EmptyMedia variant="icon">4      <Icon />5    </EmptyMedia>6    <EmptyTitle>No projects yet</EmptyTitle>7    <EmptyDescription>Create one to get started.</EmptyDescription>8  </EmptyHeader>9  <EmptyContent>10    <Button>New project</Button>11  </EmptyContent>12</Empty>

Composition

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

Outline

Add a border for a more defined empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

tsx

1import { Button } from "@/components/ui/button"2import {3  Empty,4  EmptyContent,5  EmptyDescription,6  EmptyHeader,7  EmptyMedia,8  EmptyTitle,9} from "@/components/ui/empty"1011function CloudIcon(props: React.SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />15    </svg>16  )17}1819export function Example() {20  return (21    <Empty className="border border-dashed border-border">22      <EmptyHeader>23        <EmptyMedia variant="icon">24          <CloudIcon />25        </EmptyMedia>26        <EmptyTitle>Cloud Storage Empty</EmptyTitle>27        <EmptyDescription>28          Upload files to your cloud storage to access them anywhere.29        </EmptyDescription>30      </EmptyHeader>31      <EmptyContent>32        <Button variant="secondary">Upload Files</Button>33      </EmptyContent>34    </Empty>35  )36}

Background

Add a background color or gradient directly to Empty.

No Notifications

You're all caught up. New notifications will appear here.

tsx

1import { Button } from "@/components/ui/button"2import {3  Empty,4  EmptyContent,5  EmptyDescription,6  EmptyHeader,7  EmptyMedia,8  EmptyTitle,9} from "@/components/ui/empty"1011function BellIcon(props: React.SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />15      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />16    </svg>17  )18}1920function RefreshIcon(props: React.SVGProps<SVGSVGElement>) {21  return (22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>23      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />24      <path d="M21 3v5h-5" />25      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />26      <path d="M8 16H3v5" />27    </svg>28  )29}3031export function Example() {32  return (33    <Empty className="rounded-none bg-muted">34      <EmptyHeader>35        <EmptyMedia variant="icon">36          <BellIcon />37        </EmptyMedia>38        <EmptyTitle>No Notifications</EmptyTitle>39        <EmptyDescription>40          You&apos;re all caught up. New notifications will appear here.41        </EmptyDescription>42      </EmptyHeader>43      <EmptyContent>44        <Button variant="secondary">45          <RefreshIcon className="size-3.5" />46          Refresh47        </Button>48      </EmptyContent>49    </Empty>50  )51}

Avatar

Place an avatar inside EmptyMedia.

User Offline

This user is currently offline. You can leave a message to notify them or try again later.

tsx

1import {2  Avatar,3  AvatarFallback,4  AvatarImage,5} from "@/components/ui/avatar"6import { Button } from "@/components/ui/button"7import {8  Empty,9  EmptyContent,10  EmptyDescription,11  EmptyHeader,12  EmptyMedia,13  EmptyTitle,14} from "@/components/ui/empty"1516export function Example() {17  return (18    <Empty>19      <EmptyHeader>20        <EmptyMedia>21          <Avatar size="lg">22            <AvatarImage src="/assets/brand/demos/avatars/avatar-6.png" alt="Lucia Reyes" />23            <AvatarFallback>LR</AvatarFallback>24          </Avatar>25        </EmptyMedia>26        <EmptyTitle>User Offline</EmptyTitle>27        <EmptyDescription>28          This user is currently offline. You can leave a message to notify29          them or try again later.30        </EmptyDescription>31      </EmptyHeader>32      <EmptyContent>33        <Button variant="secondary">Leave Message</Button>34      </EmptyContent>35    </Empty>36  )37}

Avatar Group

Place AvatarGroup inside EmptyMedia.

MCLREF

No Team Members

Invite your team to collaborate on this project.

tsx

1import {2  Avatar,3  AvatarFallback,4  AvatarGroup,5  AvatarImage,6} from "@/components/ui/avatar"7import { Button } from "@/components/ui/button"8import {9  Empty,10  EmptyContent,11  EmptyDescription,12  EmptyHeader,13  EmptyMedia,14  EmptyTitle,15} from "@/components/ui/empty"1617function PlusIcon(props: React.SVGProps<SVGSVGElement>) {18  return (19    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>20      <path d="M5 12h14" />21      <path d="M12 5v14" />22    </svg>23  )24}2526export function Example() {27  return (28    <Empty>29      <EmptyHeader>30        <EmptyMedia>31          <AvatarGroup>32            <Avatar>33              <AvatarImage src="/assets/brand/demos/avatars/avatar-1.png" alt="Mina Cho" />34              <AvatarFallback>MC</AvatarFallback>35            </Avatar>36            <Avatar>37              <AvatarFallback>LR</AvatarFallback>38            </Avatar>39            <Avatar>40              <AvatarFallback>EF</AvatarFallback>41            </Avatar>42          </AvatarGroup>43        </EmptyMedia>44        <EmptyTitle>No Team Members</EmptyTitle>45        <EmptyDescription>46          Invite your team to collaborate on this project.47        </EmptyDescription>48      </EmptyHeader>49      <EmptyContent>50        <Button>51          <PlusIcon className="size-3.5" />52          Invite Members53        </Button>54      </EmptyContent>55    </Empty>56  )57}

Input Group

Place InputGroup inside EmptyContent when the next step needs input.

404 - Not Found

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

/

Need help? Contact support

tsx

1import {2  Empty,3  EmptyContent,4  EmptyDescription,5  EmptyHeader,6  EmptyTitle,7} from "@/components/ui/empty"8import {9  InputGroup,10  InputGroupAddon,11  InputGroupInput,12} from "@/components/ui/input-group"13import { Kbd } from "@/components/ui/kbd"1415function SearchIcon(props: React.SVGProps<SVGSVGElement>) {16  return (17    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>18      <circle cx="11" cy="11" r="8" />19      <path d="m21 21-4.3-4.3" />20    </svg>21  )22}2324export function Example() {25  return (26    <Empty>27      <EmptyHeader>28        <EmptyTitle>404 - Not Found</EmptyTitle>29        <EmptyDescription>30          The page you&apos;re looking for doesn&apos;t exist. Try searching for31          what you need below.32        </EmptyDescription>33      </EmptyHeader>34      <EmptyContent>35        <InputGroup variant="filled" className="w-full max-w-xs">36          <InputGroupInput placeholder="Search..." />37          <InputGroupAddon>38            <SearchIcon />39          </InputGroupAddon>40          <InputGroupAddon align="inline-end">41            <Kbd>/</Kbd>42          </InputGroupAddon>43        </InputGroup>44        <EmptyDescription>45          Need help? <a href="#">Contact support</a>46        </EmptyDescription>47      </EmptyContent>48    </Empty>49  )50}

API Reference

Prop	Type	Default
className	string	—

1<Empty>2  <EmptyHeader />3  <EmptyContent />4</Empty>

EmptyHeader

Prop	Type	Default
className	string	—

1<EmptyHeader>2  <EmptyMedia />3  <EmptyTitle />4  <EmptyDescription />5</EmptyHeader>

EmptyMedia

Prop	Type	Default
variant	"default" \| "icon"	"default"
className	string	—

1<EmptyMedia variant="icon">2  <Icon />3</EmptyMedia>

1<EmptyMedia>2  <Avatar>3    <AvatarFallback>AR</AvatarFallback>4  </Avatar>5</EmptyMedia>

EmptyTitle

Prop	Type	Default
className	string	—

1<EmptyTitle>No projects yet</EmptyTitle>

EmptyDescription

Prop	Type	Default
className	string	—

1<EmptyDescription>Nothing to show here yet.</EmptyDescription>

EmptyContent

Prop	Type	Default
className	string	—

1<EmptyContent>2  <Button>New project</Button>3</EmptyContent>