Skeleton

Placeholder elements for content loading.

Skeleton

Basic skeleton element.

tsx

import { Skeleton } from "fromsrc/client"

<Skeleton width="100%" height="1rem" />
<Skeleton width={200} height={40} />

Skeleton text

Multi-line text placeholder.

tsx

import { SkeletonText } from "fromsrc/client"

<SkeletonText />
<SkeletonText lines={5} />

Skeleton card

Preset card layout.

tsx

import { SkeletonCard } from "fromsrc/client";

<SkeletonCard />;

Custom shapes

Use rounded for different shapes.

tsx

<Skeleton width={48} height={48} rounded="full" />
<Skeleton width="100%" height={100} rounded="lg" />
<Skeleton width={200} height={20} rounded={false} />

Skeleton props

prop	type	default	description
width	string \| number	-	Element width
height	string \| number	"1rem"	Element height
rounded	boolean \| string	"md"	Border radius
className	string	-	Additional classes

Skeleton text props

prop	type	default	description
lines	number	3	Number of lines

Placeholder elements for content loading.

Skeleton

Basic skeleton element.

tsx

import { Skeleton } from "fromsrc/client"

<Skeleton width="100%" height="1rem" />
<Skeleton width={200} height={40} />

Skeleton text

Multi-line text placeholder.

tsx

import { SkeletonText } from "fromsrc/client"

<SkeletonText />
<SkeletonText lines={5} />

Skeleton card

Preset card layout.

tsx

import { SkeletonCard } from "fromsrc/client";

<SkeletonCard />;

Custom shapes

Use rounded for different shapes.

tsx

<Skeleton width={48} height={48} rounded="full" />
<Skeleton width="100%" height={100} rounded="lg" />
<Skeleton width={200} height={20} rounded={false} />

Skeleton props

prop	type	default	description
width	string \| number	-	Element width
height	string \| number	"1rem"	Element height
rounded	boolean \| string	"md"	Border radius
className	string	-	Additional classes

Skeleton text props

prop	type	default	description
lines	number	3	Number of lines