Skip to content
github

Skeleton

The Skeleton component is a placeholder that stands in for content while it loads, giving people a visual cue that something is on its way. It’s a family of parts: a free-form Skeleton.Box plus pre-shaped pieces (Avatar, Icon, Logo, Typography) and composites (Form, List, Table) that mimic common layouts. All of them share the same shimmer animation.

Variations

Box

Skeleton.Box is a free-form rectangular placeholder. Size it with className (width and height) to match the shape of whatever it’s standing in for.

Avatar

Skeleton.Avatar is a placeholder for user profile images or icons, in square or rounded form.

Icon

Skeleton.Icon is a placeholder for icons, matching the icon size scale.

Skeleton.Logo is a placeholder for logo images.

Typography

Skeleton.Typography is a placeholder for text. Its variant matches the Text component’s typography scale, so the placeholder lines up with the height of the real text it replaces.

Form

Skeleton.Form is a placeholder for form fields — labels and inputs. Use linesCount for the number of fields and itemProps to tweak layout (label visibility, orientation, size).

List

Skeleton.List is a placeholder for list items. Use linesCount for the number of rows and hasActions to add a trailing action placeholder.

Use the onlyItems prop to render only the skeleton rows, without the wrapping StackedList.Root.

Note: Don’t forget to add the cn-skeleton-list className to the parent StackedList.Root for correct styling.

Table

Skeleton.Table is a placeholder for tables. Use countRows and countColumns for the grid size; a header row is shown by default (hide it with hideHeader).

Installation

import { Skeleton } from "@harnessio/ui/components";


//...


return (
  <Skeleton.Box className="w-[400px] h-[80px]" />
)