Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Profile Settings Form Skeleton for Vue

A profile settings placeholder with three labeled fields, a taller bio block and a save button.

UI library: Ark 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 Vue, Ark UI does not read the saved profile.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div class="flex w-full max-w-md flex-col gap-6">
  <div class="flex flex-col gap-2">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-10 w-full" />
  </div>
  <div class="flex flex-col gap-2">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-10 w-full" />
  </div>
  <div class="flex flex-col gap-2">
    <Skeleton class="h-4 w-16" />
    <Skeleton class="h-10 w-full" />
  </div>
  <div class="flex flex-col gap-2">
    <Skeleton class="h-4 w-28" />
    <Skeleton class="h-24 w-full" />
  </div>
  <Skeleton class="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.

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.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples