Loading
Skeleton

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"];
};