shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · Form
Search Form Skeleton for React
A search placeholder with an input and a button, filter pills, a divider and a results row.
A loading search page: an input and a button on one row, a label with four filter pills, a thin divider, and a row for the result count. Every part, the divider included, is a Skeleton.
Use it for search or filter pages while the filters and results load.
Preview
Installation
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.
Related
- Input Fields SkeletonThree label and input placeholders
- Multi-column Form SkeletonA form placeholder with two rows of
- Simple Single Select ComboboxA single-select combobox that opens from
- Simple Command DialogA button that opens a command dialog with
- Badge with Text (Standard)A default badge with a short label for a
- Input with LabelA text input with a label above it