Skeleton

The Skeleton component is a placeholder UI element that represents the loading state of a component. It can be used to indicate that content is being loaded or processed, providing a visual cue to users.

Usage

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

//...

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

Anatomy

Skeleton Box

The Skeleton.Box component is a simple, flexible rectangular placeholder that can be used to indicate loading states for various UI elements. It is a free-form box — you can specify its width and height to match the shape of the content being loaded.

Skeleton Avatar

The Skeleton.Avatar component is a placeholder for user profile images or icons. It can be used to indicate loading states for avatar images.

Skeleton Icon

The Skeleton.Icon component is a placeholder for icons. It can be used to indicate loading states for icon-based UI elements.

Skeleton Logo

The Skeleton.Logo component is a placeholder for logos. It can be used to indicate loading states for logo images.

Skeleton Typography

The Skeleton.Typography component is a placeholder for text elements. It can be used to indicate loading states for text content. Variants include different text styles such as headings, body text, and captions.

Skeleton Form

The Skeleton.Form component is a placeholder for form elements. It can be used to indicate loading states for input fields, labels, and other form controls. Orientation variants include vertical and horizontal layouts. linesCount can be used to specify the number of lines in the skeleton form item.

Skeleton List

The Skeleton.List component is a placeholder for list items. It can be used to indicate loading states for list content. linesCount can be used to specify the number of lines in the skeleton list item. The hasActions prop can be used to indicate that the list items have action buttons.

Skeleton Table

The Skeleton.Table component is a placeholder for table elements. It can be used to indicate loading states for table content. countRows can be used to specify the number of rows in the skeleton table. countColumns can be used to specify the number of columns in the skeleton table. showHeader can be used to indicate that the table has a header row.

API Reference

`Skeleton.Box`

Prop	Required	Default	Type
className	false		string

`Skeleton.Avatar`

Prop	Required	Default	Type
size	false	'md'	'sm' \| 'md' \| 'lg'
rounded	false	false	boolean
className	false		string

`Skeleton.Icon`

Prop	Required	Default	Type
size	false	'sm'	'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'
className	false		string

`Skeleton.Logo`

Prop	Required	Default	Type
size	false	'lg'	'sm' \| 'md' \| 'lg'
className	false		string

`Skeleton.Typography`

Prop	Required	Default	Type
variant	false	'body'	'heading-hero' \| 'heading-section' \| 'heading-subsection' \| 'heading-base' \| 'heading-small' \| 'body' \| 'body-code' \| 'body-single-line' \| 'body-single-line-code' \| 'caption' \| 'caption-single-line'
className	false		string

`Skeleton.Form`

Prop	Required	Default	Type
linesCount	false	9	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9
className	false		string
itemProps	false	{ withLabel: true, orientation: 'vertical', size: 'md', linesCount: 3 }	{ withLabel?: boolean; orientation?: 'vertical' \| 'horizontal'; size?: 'sm' \| 'md'; labelClassName?: string, inputClassName?: string }

`Skeleton.List`

Prop	Required	Default	Type
linesCount	false	8	number
className	false		string
hasActions	false	false	boolean
classNames	false		{ item?: string; leftTitle?: string; leftDescription?: string, rightTitle?: string, rightDescription?: string, actions?: string }

`Skeleton.Table`

Prop	Required	Default	Type
countRows	false	12	number
countColumns	false	5	number
hideHeader	false	false	boolean
className	false		string
classNameHeader	false		string
classNameBody	false		string