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 Vue, Ark UI does not run the query.
Installation
Anatomy
Usage
<div class="flex w-full max-w-md flex-col gap-4">
<div class="flex gap-2">
<Skeleton class="h-10 flex-1" />
<Skeleton class="h-10 w-24" />
</div>
<div class="flex flex-col gap-3">
<Skeleton class="h-4 w-16" />
<div class="flex flex-wrap gap-2">
<Skeleton class="h-8 w-20 rounded-full" />
<Skeleton class="h-8 w-24 rounded-full" />
<Skeleton class="h-8 w-16 rounded-full" />
<Skeleton class="h-8 w-28 rounded-full" />
</div>
</div>
<Skeleton class="h-px w-full" />
<div class="flex items-center justify-between">
<Skeleton class="h-4 w-32" />
<Skeleton class="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.
