Skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Usage

1import { Skeleton } from '@lenso/ui';

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  panel: {7    width: 250,8    display: "flex",9    flexDirection: "column",10    gap: 20,11    borderRadius: "var(--radius-lg)",12    backgroundColor: "transparent",13    padding: 16,14    boxShadow: "var(--shadow-panel)",15  },16  text: { display: "flex", flexDirection: "column", gap: 12 },17  picture: { height: 128, borderRadius: "var(--radius-lg)" },18  short: { height: 12, width: "60%", borderRadius: "var(--radius-lg)" },19  long: { height: 12, width: "80%", borderRadius: "var(--radius-lg)" },20  shortest: { height: 12, width: "40%", borderRadius: "var(--radius-lg)" },21});22export function Basic() {23  return (24    <div {...stylex.props(styles.panel)}>25      <Skeleton xstyle={styles.picture} />26      <div {...stylex.props(styles.text)}>27        <Skeleton xstyle={styles.short} />28        <Skeleton xstyle={styles.long} />29        <Skeleton xstyle={styles.shortest} />30      </div>31    </div>32  );33}34export default Basic;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Examples

Text Content

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  text: { width: "100%", maxWidth: 448, display: "flex", flexDirection: "column", gap: 12 },7  line: { height: 16, borderRadius: "var(--radius)" },8  full: { width: "100%" },9  five: { width: "83.333333%" },10  four: { width: "66.666667%" },11  half: { width: "50%" },12});13export function TextContent() {14  return (15    <div {...stylex.props(styles.text)}>16      <Skeleton xstyle={[styles.line, styles.full]} />17      <Skeleton xstyle={[styles.line, styles.five]} />18      <Skeleton xstyle={[styles.line, styles.four]} />19      <Skeleton xstyle={[styles.line, styles.full]} />20      <Skeleton xstyle={[styles.line, styles.half]} />21    </div>22  );23}24export default TextContent;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

User Profile

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  row: { display: "flex", alignItems: "center", gap: 12 },7  avatar: { height: 40, width: 40, flexShrink: 0, borderRadius: "50%" },8  text: { flex: 1, display: "flex", flexDirection: "column", gap: 8 },9  name: { height: 12, width: 144, borderRadius: "var(--radius-lg)" },10  detail: { height: 12, width: 96, borderRadius: "var(--radius-lg)" },11});12export function UserProfile() {13  return (14    <div {...stylex.props(styles.row)}>15      <Skeleton xstyle={styles.avatar} />16      <div {...stylex.props(styles.text)}>17        <Skeleton xstyle={styles.name} />18        <Skeleton xstyle={styles.detail} />19      </div>20    </div>21  );22}23export default UserProfile;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

List Items

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  list: { width: "100%", maxWidth: 384, display: "flex", flexDirection: "column", gap: 16 },7  row: { display: "flex", alignItems: "center", gap: 12 },8  avatar: { height: 40, width: 40, flexShrink: 0, borderRadius: "var(--radius-lg)" },9  text: { flex: 1, display: "flex", flexDirection: "column", gap: 8 },10  full: { height: 12, width: "100%", borderRadius: "var(--radius)" },11  short: { height: 12, width: "80%", borderRadius: "var(--radius)" },12});13export function List() {14  return (15    <div {...stylex.props(styles.list)}>16      {Array.from({ length: 3 }, (_, index) => (17        <div key={index} {...stylex.props(styles.row)}>18          <Skeleton xstyle={styles.avatar} />19          <div {...stylex.props(styles.text)}>20            <Skeleton xstyle={styles.full} />21            <Skeleton xstyle={styles.short} />22          </div>23        </div>24      ))}25    </div>26  );27}28export default List;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Grid

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",11    gap: 16,12  },13  bone: { height: 96, borderRadius: "var(--radius-xl)" },14});15export function Grid() {16  return (17    <div {...stylex.props(styles.grid)}>18      <Skeleton xstyle={styles.bone} />19      <Skeleton xstyle={styles.bone} />20      <Skeleton xstyle={styles.bone} />21    </div>22  );23}24export default Grid;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Single Shimmer

A synchronized shimmer effect that passes over all skeleton elements at once. Apply the skeleton--shimmer class to a parent container and set animationType="none" on child skeletons.

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",11    gap: 16,12    borderRadius: "var(--radius-xl)",13    backgroundColor: "transparent",14  },15  bone: { height: 96, borderRadius: "var(--radius-xl)" },16});17export function SingleShimmer() {18  return (19    <Skeleton xstyle={styles.grid}>20      <Skeleton animationType="none" xstyle={styles.bone} />21      <Skeleton animationType="none" xstyle={styles.bone} />22      <Skeleton animationType="none" xstyle={styles.bone} />23    </Skeleton>24  );25}26export default SingleShimmer;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Animation Types

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  grid: {7    display: "grid",8    width: "100%",9    maxWidth: 576,10    gridTemplateColumns: {11      default: "1fr",12      "@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",13      "@media (min-width: 1024px)": "repeat(3, minmax(0, 1fr))",14    },15    gap: 24,16  },17  column: { display: "flex", flexDirection: "column", gap: 8 },18  label: {19    fontSize: 12,20    lineHeight: "16px",21    color: "var(--muted)",22    overflow: "hidden",23    textOverflow: "ellipsis",24    whiteSpace: "nowrap",25  },26  panel: {27    display: "flex",28    flexDirection: "column",29    gap: 12,30    borderRadius: "var(--radius-lg)",31    backgroundColor: "transparent",32    padding: 16,33    boxShadow: "var(--shadow-panel)",34  },35  picture: { height: 80, borderRadius: "var(--radius-lg)" },36  short: { height: 12, width: "60%", borderRadius: "var(--radius-lg)" },37  long: { height: 12, width: "80%", borderRadius: "var(--radius-lg)" },38});39export function AnimationTypes() {40  return (41    <div {...stylex.props(styles.grid)}>42      {(["shimmer", "pulse", "none"] as const).map((animationType) => (43        <div key={animationType} {...stylex.props(styles.column)}>44          <p {...stylex.props(styles.label)}>45            {animationType === "shimmer" ? "Shimmer" : animationType === "pulse" ? "Pulse" : "None"}46          </p>47          <div {...stylex.props(styles.panel)}>48            <Skeleton animationType={animationType} xstyle={styles.picture} />49            <Skeleton animationType={animationType} xstyle={styles.short} />50            <Skeleton animationType={animationType} xstyle={styles.long} />51          </div>52        </div>53      ))}54    </div>55  );56}57export default AnimationTypes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Skeleton } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const shine = stylex.keyframes({6  from: { translate: "-100% 0" },7  to: { translate: "100% 0" },8});9const styles = stylex.create({10  panel: {11    width: 250,12    display: "flex",13    flexDirection: "column",14    gap: 20,15    borderRadius: "var(--radius-xl)",16    border: "1px solid color-mix(in oklab, var(--border) 80%, transparent)",17    backgroundColor: "var(--surface)",18    padding: 16,19    boxShadow:20      "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .1))",21  },22  text: { display: "flex", flexDirection: "column", gap: 12 },23  bone: {24    borderRadius: "var(--radius-lg)",25    backgroundColor: "light-dark(oklch(92.2% 0 0 / .9), oklch(26.9% 0 0 / .9))",26    "::after": {27      position: "absolute",28      inset: 0,29      width: "100%",30      height: "100%",31      content: '""',32      translate: "-100% 0",33      backgroundImage:34        "linear-gradient(120deg, transparent 10%, light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .1)) 45%, light-dark(rgb(255 255 255 / .1), rgb(255 255 255 / .04)) 55%, transparent 90%)",35      animationName: { default: shine, "@media (prefers-reduced-motion: reduce)": "none" },36      animationDuration: "3s",37      animationTimingFunction: "ease-in-out",38      animationIterationCount: "infinite",39      pointerEvents: "none",40    },41  },42  picture: { height: 128 },43  short: { height: 12, width: "60%" },44  long: { height: 12, width: "80%" },45  shortest: { height: 12, width: "40%" },46});47export function CustomStyles() {48  return (49    <div {...stylex.props(styles.panel)}>50      <Skeleton xstyle={[styles.bone, styles.picture]} />51      <div {...stylex.props(styles.text)}>52        <Skeleton xstyle={[styles.bone, styles.short]} />53        <Skeleton xstyle={[styles.bone, styles.long]} />54        <Skeleton xstyle={[styles.bone, styles.shortest]} />55      </div>56    </div>57  );58}59export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Skeleton component classes, you can use the @layer components directive. Learn more.

1@layer components {2  /* Base skeleton styles */3  .skeleton {4    @apply bg-surface-secondary/50; /* Change base background */5  }6
7  /* Shimmer animation gradient */8  .skeleton--shimmer:before {9    @apply viasurface; /* Change shimmer gradient color */10  }11
12  /* Pulse animation */13  .skeleton--pulse {14    @apply animate-pulse opacity-75; /* Customize pulse animation */15  }16
17  /* No animation variant */18  .skeleton--none {19    @apply opacity-50; /* Style for static skeleton */20  }21}

Global Animation Configuration

You can set a default animation type for all Skeleton components in your application by defining the --skeleton-animation CSS variable:

1/* In your global CSS file */2:root {3  /* Possible values: shimmer, pulse, none */4  --skeleton-animation: pulse;5}6
7/* You can also set different values for light/dark themes */8.light, [data-theme="light"] {9  --skeleton-animation: shimmer;10}11
12.dark, [data-theme="dark"] {13  --skeleton-animation: pulse;14}

This global setting will be overridden by the animationType prop when specified on individual components.

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Skeleton component uses these CSS classes (View source styles):

Base Class [!toc]

.skeleton - Base skeleton styles with background and rounded corners

Animation Variant Classes [!toc]

.skeleton--shimmer - Adds shimmer animation with gradient effect (default)
.skeleton--pulse - Adds pulse animation using Tailwind's animate-pulse
.skeleton--none - No animation, static skeleton

Animation

The Skeleton component supports three animation types, each with different visual effects:

Shimmer Animation [!toc]

The shimmer effect creates a gradient that moves across the skeleton element:

1.skeleton--shimmer:before {2  @apply animate-skeleton via-surface-3 absolute inset-0 -translate-x-full3         bg-gradient-to-r from-transparent to-transparent content-[''];4}

The shimmer animation is defined in the theme using:

1@theme inline {2  --animate-skeleton: skeleton 2s linear infinite;3
4  @keyframes skeleton {5    100% {6      transform: translateX(200%);7    }8  }9}

Pulse Animation [!toc]

The pulse animation uses Tailwind's built-in animate-pulse utility:

1.skeleton--pulse {2  @apply animate-pulse;3}

No Animation [!toc]

For static skeletons without any animation:

1.skeleton--none {2  /* No animation styles applied */3}

API Reference

Skeleton

Prop	Type	Default	Description
`animationType`	`"shimmer" \| "pulse" \| "none"`	`"shimmer"` or CSS variable	The animation type for the skeleton. Can be globally configured via `--skeleton-animation` CSS variable
`className`	`string`	-	Additional CSS classes

Card

Flexible container component for grouping related content and actions

Avatar

Display user profile images with customizable fallback content

Skeleton

Usage

Examples

Text Content

User Profile

List Items

Grid

Single Shimmer

Animation Types

Customization

Tailwind CSS

Global CSS

Global Animation Configuration

Styling Reference

CSS Classes

Base Class [!toc]

Animation Variant Classes [!toc]

Animation

Shimmer Animation [!toc]

Pulse Animation [!toc]

No Animation [!toc]

API Reference

Skeleton

Related Components