Overview

Introduction

UsageComing soon

Theme

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Skeleton

Displays an animated placeholder in place of contents.

 <Skeleton>
  <Badge>Loading</Badge>
</Skeleton>

Props

No props data available for Skeleton.

Usage

Loading

Use the loading prop to control when the Skeleton is rendered.

 <Flex gap="3">
  <Skeleton loading={true}>
    <Button>Button</Button>
  </Skeleton>
  <Skeleton loading={false}>
    <Button>Button</Button>
  </Skeleton>
</Flex>

Empty

An empty Skeleton displays a placeholder that represents a line of text.

 <Flex direction="column" gap="3" maxWidth="300px">
  <Skeleton />
  <Skeleton />
  <Skeleton width="80%" />
</Flex>

With interactive elements

You can nest interactive elements like inputs and buttons inside Skeleton. The component automatically makes sure that they can’t be hovered, clicked, or focused.

 <Flex direction="column" gap="1" maxWidth="300px">
  <Text color="gray" size="2">
    <Skeleton>Email</Skeleton>
  </Text>
  <Skeleton>
    <TextField.Root placeholder="Your email address" />
  </Skeleton>
</Flex>

Variants

Context

Usage

Used 639 times across 2 packages

Dashboard

623

Admin Portal

Variant Distribution

true

100%

Where it's used

154 files

packages/dashboard/src/components/users/user-details.tsx33

packages/dashboard/src/legacy-pages/[environmentId]/radar/detections/[eventId]/index.tsx28

packages/dashboard/src/legacy-pages/[environmentId]/vault/[objectId]/index.tsx21

packages/dashboard/src/legacy-pages/[environmentId]/vault/events/[eventId]/index.tsx17

packages/dashboard/src/components/flags/flag/flag-details.tsx14

packages/dashboard/src/components/skeletons.tsx14

packages/dashboard/src/legacy-pages/branding/index.tsx14

packages/dashboard/src/components/pipes/details/connection-details.tsx13

packages/dashboard/src/legacy-pages/[environmentId]/events/[eventId].tsx13

/:environmentId/applications/:applicationId

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/[applicationId]/application-details.tsx12

Show 144 more files

Skeleton

On this page

Props

Usage

Loading

Empty

With interactive elements

Variants

Context

Usage Statistics

Usage

Variant Distribution

Where it's used