Skeleton
The Skeleton displays placeholder shapes for various UI elements. It helps improve the user experience by indicating that content is loading without causing abrupt layout shifts.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import SkeletonParagraph from '@start-base/start-ui/SkeletonParagraph';
import SkeletonTable from '@start-base/start-ui/SkeletonTable';
import SkeletonList from '@start-base/start-ui/SkeletonList';
import SkeletonInput from '@start-base/start-ui/SkeletonInput';
import SkeletonImage from '@start-base/start-ui/SkeletonImage';
import SkeletonCard from '@start-base/start-ui/SkeletonCard';
import SkeletonButton from '@start-base/start-ui/SkeletonButton';
import SkeletonAvatar from '@start-base/start-ui/SkeletonAvatar';Usages
Avatar Skeleton
Button Skeleton
Card Skeleton
Image Skeleton
Input Skeleton
List Skeleton
Table Skeleton
Paragraph Skeleton
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| children | string | Children of the skeleton | ||
| width | string | 100% | Width of the skeleton | |
| height | string | 100% | Height of the skeleton | |
| lines | number | 1 | Number of lines | |
| itemCount | number | 1 | Number of item | |
| rows | number | 1 | Number of rows | |
| columns | number | 1 | Number of columns | |
| size | string | 100% | Size of the skeleton |