Skeleton

The Skeleton component displays loading placeholders with customizable size and shape.

Demo

React

Vue

Usage

React

import { Skeleton } from '@fintech-sandpit/ui/react';

return (
  <div className="space-y-6 max-w-md">
    <div className="flex items-start gap-4">
      <Skeleton.Circle size="2.5rem" />

      <Skeleton.Text noOfLines={2} />
    </div>

    <Skeleton.Square className="w-full h-48" />
  </div>
);

Vue

<script setup lang="ts">
import { Skeleton } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <div class="space-y-6 max-w-md">
    <div class="flex items-start gap-4">
      <Skeleton.Circle size="2.5rem" />

      <Skeleton.Text :no-of-lines="2" />
    </div>

    <Skeleton.Square class="w-full h-48" />
  </div>
</template>

Props

Skeleton components accepts all standard HTML div attributes. Use CSS classes to control width and height.

Skeleton Circle Props

Name	Type	Required	Default	Description
size	CssUnit		2em	Size of the circle

Skeleton Text Props

React

Name	Type	Required	Default	Description
gap	CssUnit		0.5em	Gap between text lines
noOfLines	number		3	Number of text lines to render

Vue

Name	Type	Required	Default	Description
gap	CssUnit		0.5em	Gap between text lines
no-of-lines	number		3	Number of text lines to render

Types

type CssUnit = `${number}${UnitToken}`
type UnitToken = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'