shadcn.io is an independent project built on shadcn/ui
Three labeled fields stack above a taller block for the bio and a shorter bar for save.
Use it on an edit-profile page while the saved values load. After the fields are real, a save in progress belongs on the button as a Spinner. In React, Ark UI does not read the saved profile.
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
Use email insteadNo credit card
Anatomy
Usage
<div className="flex w-full max-w-md flex-col gap-6">
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-10 w-full" />
</div>
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-10 w-full" />
</div>
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-10 w-full" />
</div>
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-24 w-full" />
</div>
<Skeleton className="h-10 w-32" />
</div>FAQ
How is the settings form stacked?
A max-w-md column with gap-6. Three fields, a taller field, then a button.
What does one field look like?
flex flex-col gap-2. The label is h-4 at w-20, w-24 or w-16. The control is h-10 w-full.
Which bar is the bio?
The fourth field. Its label is h-4 w-28 and its control is h-24 w-full, so it stands in for a multiline bio.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
