Skeleton

Holds the place of text that is still loading, as bars a single light passes over.

Configurations

Supported configurations for this component.

2 examples

Prose

Rows

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
widths	`string[]`	['100%','92%','64%']	Bar widths, top to bottom. A ragged last line reads as prose; equal bars read as a table.
size	`'sm'\|'md'`	'md'	Bar height: 8px under 12px type, 12px under 14px.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

Represents a person as a square image tile that falls back to their initials.