Empty

No studies match these filters

Nothing in the last 24 hours is both CT Head and marked urgent. Widen the date range, or clear the modality filter.

'use client'import { FilterXIcon } from 'lucide-react'import { Button } from '@/registry/qure/ui/button'import {  Empty, EmptyActions, EmptyDescription, EmptyMedia, EmptyTitle,} from '@/registry/qure/ui/empty'export default function EmptyDemo() {  return (    <Empty>      <EmptyMedia>        <FilterXIcon />      </EmptyMedia>      <EmptyTitle>No studies match these filters</EmptyTitle>      <EmptyDescription>        Nothing in the last 24 hours is both <strong>CT Head</strong> and marked urgent. Widen the        date range, or clear the modality filter.      </EmptyDescription>      <EmptyActions>        <Button variant="secondary">Clear filters</Button>        <Button variant="tertiary">Last 7 days</Button>      </EmptyActions>    </Empty>  )}

Installation

npx shadcn@latest add https://qure-ui.qure.ai/r/empty.json

Usage

import {
  Empty, EmptyActions, EmptyDescription, EmptyMedia, EmptyTitle,
} from '@/components/ui/empty'

<Empty>
  <EmptyMedia>
    <FilterXIcon />
  </EmptyMedia>
  <EmptyTitle>No studies match these filters</EmptyTitle>
  <EmptyDescription>Widen the date range, or clear the modality filter.</EmptyDescription>
  <EmptyActions>
    <Button variant="secondary">Clear filters</Button>
  </EmptyActions>
</Empty>

There is no Base UI primitive here and nothing to borrow — an empty state has no behaviour. What it has is a shape people recognise, and the discipline to keep the last part of that shape present: nothing found with no way out is a dead end.

Composition

<Empty>               {/* the block; owns size and variant */}
  <EmptyMedia>        {/* the icon, aria-hidden */}
  <EmptyTitle>        {/* what happened, in one line */}
  <EmptyDescription>  {/* why, and what would change it */}
  <EmptyActions>      {/* the way out — one primary action, at most one beside it */}
</Empty>

EmptyActions is the part worth arguing about. Every other slot describes the situation; only this one resolves it. If you cannot think of an action, that is usually a sign the description is wrong rather than a sign the state has no exit — "no results for ACC-447190" can offer a different way to search even when it cannot offer results.

EmptyMedia is aria-hidden. A screen reader announcing "image, magnifying glass" before "No studies match these filters" adds nothing the title does not already say.

Nothing found

No results for “ACC-447190”

Accession numbers on this site are ten digits. Check for a missing digit, or press ⌘K to search by patient name instead.

'use client'import { SearchXIcon } from 'lucide-react'import {  Empty, EmptyDescription, EmptyMedia, EmptyTitle,} from '@/registry/qure/ui/empty'import { Kbd, KbdGroup } from '@/registry/qure/ui/kbd'/** * A search that found nothing. The query is quoted back — without it the * reader cannot tell a typo from a genuinely empty result — and the way out is * the shortcut they will use next, not a button. */export default function EmptySearch() {  return (    <Empty>      <EmptyMedia>        <SearchXIcon />      </EmptyMedia>      <EmptyTitle>No results for &ldquo;ACC-447190&rdquo;</EmptyTitle>      <EmptyDescription>        Accession numbers on this site are ten digits. Check for a missing digit, or press{' '}        <KbdGroup>          <Kbd>⌘</Kbd>          <Kbd>K</Kbd>        </KbdGroup>{' '}        to search by patient name instead.      </EmptyDescription>    </Empty>  )}

Quote the query back. Without it the reader cannot tell a typo from a genuinely empty result, and the two need completely different responses. Here the way out is the shortcut they will reach for next rather than a button — see Kbd.

Nothing yet

Your worklist is empty

Studies appear here as the PACS routes them to you. Nothing has arrived since your shift began at 08:00.

'use client'import { InboxIcon } from 'lucide-react'import { Button } from '@/registry/qure/ui/button'import {  Empty, EmptyActions, EmptyDescription, EmptyMedia, EmptyTitle,} from '@/registry/qure/ui/empty'/** * Nothing here yet is a different state from nothing found, and it should read * differently: no filter to clear, no query to fix, just the one thing that * gets the worklist started. */export default function EmptyFirstRun() {  return (    <Empty>      <EmptyMedia>        <InboxIcon />      </EmptyMedia>      <EmptyTitle>Your worklist is empty</EmptyTitle>      <EmptyDescription>        Studies appear here as the PACS routes them to you. Nothing has arrived since your shift        began at 08:00.      </EmptyDescription>      <EmptyActions>        <Button>Claim from the unassigned pool</Button>      </EmptyActions>    </Empty>  )}

A different state, and it should read differently. There is no filter to clear and no query to fix, so the description explains the mechanism — how studies get here — and the single action starts the work.

Distinguishing the two matters more than it looks. A first-run screen that says "no results" implies the reader did something wrong.

In a panel

Priors

No prior imaging

Nothing for this patient in the last 5 years at this site.

'use client'import { LayersIcon } from 'lucide-react'import { Card, CardContent, CardHeader, CardTitle } from '@/registry/qure/ui/card'import {  Empty, EmptyDescription, EmptyMedia, EmptyTitle,} from '@/registry/qure/ui/empty'/** * `size="sm"` and a bare icon, for a panel beside the images. The heading is * rendered as an `h4` so it sits under the card's own title rather than * restarting the outline. */export default function EmptyPanel() {  return (    <Card className="w-80">      <CardHeader>        <CardTitle>Priors</CardTitle>      </CardHeader>      <CardContent>        <Empty size="sm">          <EmptyMedia variant="bare">            <LayersIcon />          </EmptyMedia>          <EmptyTitle render={<h4 />}>No prior imaging</EmptyTitle>          <EmptyDescription>            Nothing for this patient in the last 5 years at this site.          </EmptyDescription>        </Empty>      </CardContent>    </Card>  )}

size="sm" with variant="bare" media, for a sidebar next to the images where the full block would dominate. The heading is rendered as an h4 so it sits beneath the card's own title:

<EmptyTitle render={<h4 />}>No prior imaging</EmptyTitle>

EmptyTitle defaults to <h3> because an empty state is usually the only content of its region. Inside something that already has a heading, push it down a level rather than leaving a gap in the document outline.

A region to be filled

Drop a DICOM study here

A folder of .dcm files, or a DICOMDIR. Studies are de-identified on upload.

'use client'import { UploadCloudIcon } from 'lucide-react'import { Button } from '@/registry/qure/ui/button'import {  Empty, EmptyActions, EmptyDescription, EmptyMedia, EmptyTitle,} from '@/registry/qure/ui/empty'/** * The dashed outline says "this region is meant to hold something". Use it for * a drop target; do not use it for a list that happens to be empty, where the * border implies an interaction that is not there. */export default function EmptyOutline() {  return (    <Empty variant="outline" className="w-full max-w-md">      <EmptyMedia>        <UploadCloudIcon />      </EmptyMedia>      <EmptyTitle>Drop a DICOM study here</EmptyTitle>      <EmptyDescription>        A folder of .dcm files, or a DICOMDIR. Studies are de-identified on upload.      </EmptyDescription>      <EmptyActions>        <Button variant="secondary">Choose files</Button>      </EmptyActions>    </Empty>  )}

The dashed outline says this holds something. Use it for a drop target.

Do not use variant="outline" for a list that happens to be empty. The border implies a place to drop or click, and a border that promises an interaction which is not there is worse than no border.

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"md"`	`sm` inside a panel or a table body; `md` for a whole page.
`variant`	`"plain" \| "outline"`	`"plain"`	`outline` draws the dashed border.

EmptyMedia

Prop	Type	Default	Description
`variant`	`"tile" \| "bare"`	`"tile"`	`tile` puts the icon in a tinted round tile; `bare` draws it alone.

EmptyTitle

Prop	Type	Default	Description
`render`	`ReactElement`	`<h3 />`	Change the heading level to fit the surrounding outline.

EmptyDescription renders a <p> and EmptyActions a <div>; both take the usual props for those elements.