Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty State with Action Combobox for React

A combobox that opens on an empty state, with a Create Item button that adds the first three items.

Before anything exists, the popup shows an inbox icon, No items yet, and Get started by creating your first item. Create Item adds New Item 1, New Item 2, and New Item 3.

Use it on a first-run screen, where a bare no-results line would strand people. After items exist, an empty search can use Empty. In React, Base UI does not create the first items.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={items}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select item..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search items..." showTrigger={false} />
    {items.length > 0 ? (
      <>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </>
    ) : (
      <div className="flex flex-col items-center gap-3 p-6 text-center">
        <InboxIcon
          aria-hidden="true"
          className="size-12 text-muted-foreground"
        />
        <div>
          <p className="font-medium text-sm">No items yet</p>
          <p className="text-muted-foreground text-xs">
            Get started by creating your first item
{/* The rest of the file is under Installation. */}

FAQ

When does the empty block show?

While the list has no items at all. The demo keeps a flag for that and renders the block in place of the list, so it isn't confused with a search that matched nothing.

What is inside that block?

An InboxIcon at size-12, No items yet in font-medium, Get started by creating your first item in text-muted-foreground, and a small full-width Button with a PlusIcon that says Create Item.

What does Create Item add?

New Item 1, New Item 2 and New Item 3. They're stored in state and passed to the list. In an app, open a create form here or call your API, then add what comes back.

What happens after the items exist?

The list takes the block's place. Search filters it, a pick shows on the button, and No results found. covers a search that matches nothing.

Does pressing the button close the list?

No. It's inside ComboboxContent, so pressing it counts as a click inside the popup. The list stays open and shows the new items.

API Reference

Combobox

Sets items={items}, placeholder="Select item...", placeholder="Search items...", showTrigger={false} and value={item}. The rest is on the Combobox page.

Button

Sets variant="outline", onClick={handleCreate} and size="sm". The rest is on the Button page.

All 42 combobox examples