shadcn.io is an independent project built on shadcn/ui
An input and a button share a row, then a label with four filter pills, a thin divider, and a line for the result count. The divider is a bar too.
Use it while the filters and the results load together. If the search finished with nothing to show, use Empty. In React, Ark UI does not run the query.
Installation
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-4">
<div className="flex gap-2">
<Skeleton className="h-10 flex-1" />
<Skeleton className="h-10 w-24" />
</div>
<div className="flex flex-col gap-3">
<Skeleton className="h-4 w-16" />
<div className="flex flex-wrap gap-2">
<Skeleton className="h-8 w-20 rounded-full" />
<Skeleton className="h-8 w-24 rounded-full" />
<Skeleton className="h-8 w-16 rounded-full" />
<Skeleton className="h-8 w-28 rounded-full" />
</div>
</div>
<Skeleton className="h-px w-full" />
<div className="flex items-center justify-between">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-8 w-20" />
</div>
</div>FAQ
How are the search field and the button placed?
flex gap-2 inside a max-w-md column with gap-4. The field is h-10 flex-1. The button is h-10 w-24.
What are the pill bars?
A label h-4 w-16, then flex flex-wrap gap-2 of four h-8 rounded-full bars: w-20, w-24, w-16 and w-28. flex-wrap lets them wrap when the row is narrow.
What is the thin line under the filters?
h-px w-full on a Skeleton. It is a one-pixel bar, the divider between the filters and the results row.
What is in the results row?
flex items-center justify-between. A h-4 w-32 bar on the start, and an h-8 w-20 bar on the end.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
