Skeleton
Optimistic UI made easy
Anatomy
import { Skeleton } from "@lualtek/react-components";
export default () => {
return <Skeleton />;
};
API Reference
export type SkeletonProps = {
/**
* Set the edge radius of each skeleton block.
* This value must be one of the available `radius` tokens
* @default 4
*/
borderRadius?: TokensTypes["radius"];
/**
* Set the block to be a circle, ignoring the `borderRadius` property.
*/
circle?: boolean;
/**
* Set how many skeleton blocks to display.
* @default 1
*/
count?: number;
/**
* Set the width of each skeleton block.
*/
width?: string | number;
/**
* Set the height of each skeleton block.
*/
height?: string | number;
/**
* Renders every block on their own line or in a single line.
*
* Note: By default, if a width is not specified, every items will fill the available space
*/
inline?: boolean;
/**
* Enable the shim animation and the announcement of the loading state.
* @default true
*/
enableAnimation?: boolean;
/**
* Set the gap between stacked skeleton items.
*/
gap?: TokensTypes["space"];
};