Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Profile

Profile Settings Form Skeleton for React

A profile settings placeholder with three fields, a bio textarea and a save button.

Framework
UI library

A loading settings form: three label and input pairs, a taller block for the bio, and a save button. Every block is a Skeleton.

Use it on an edit profile or account page while the saved values load.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

How big is the save bar?

h-10 w-32, at the start of the column. The fields above it are w-full.

How do I keep the form from jumping?

Match h-10 to the inputs and h-24 to the textarea you render. The label widths in this file are w-20, w-24, w-16 and w-28.

Should the settings bars be hidden?

Set aria-hidden on each Skeleton when a status already says the form is loading. The bars are not a loading message on their own.

All 30 skeleton examples