shadcn.io is an independent project built on shadcn/ui
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 Solid, Ark UI does not create the first items.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
getAnchorElement: () => triggerRef
}} selectionBehavior="clear" value={value()}>
<ComboboxTrigger class={cn(buttonVariants({
variant: "outline"
}), "w-[250px] justify-between")} ref={triggerRef}>
{value()[0] ?? "Select item..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search items..." showTrigger={false} />
{hasItems() ? <>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(item => <ComboboxItem item={item}>
{item}
</ComboboxItem>)}
</ComboboxList>
</> : <div class="flex flex-col items-center gap-3 p-6 text-center">
<InboxIcon aria-hidden="true" class="size-12 text-muted-foreground" />
<div>
<p class="font-medium text-sm">No items yet</p>
<p class="text-muted-foreground text-xs">
Get started by creating your first item
</p>
</div>
<Button class="w-full" onClick={handleCreate} size="sm">
<PlusIcon aria-hidden="true" data-icon="inline-start" />
Create Item
</Button>
</div>}
</ComboboxContent>
</Combobox>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 replace the collection's items through set from useListCollection.
In an app, open a create form here or call your API, then add what comes back.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
Button
Sets onClick={handleCreate} and size="sm". The rest is on the Button page.
