Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Skeleton

Skeleton renders non-semantic loading placeholders on the theme border token, so blocks read clearly in light and dark themes.

CoreFeedback & States@gaudi/design-system/core/SkeletonView in StorybookSource

Shimmer is the text counterpart: a highlight that sweeps across a label such as Thinking… while work is in progress.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Skeleton from '@gaudi/design-system/core/Skeleton';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/skeleton-avatar-list.json.

Usage

import { Shimmer, Skeleton } from '@gaudi/design-system';
<><Skeleton className='h-4 w-40' /><p role='status'><Shimmer>Searching the web…</Shimmer></p></>

Examples

List with avatars and actions

Storybook

Chat messages

Storybook

Dashboard stats and table

Storybook

Form

Storybook

Media card

Storybook

Profile page

Storybook

API

6 props

Accessibility

Skeleton is aria-hidden and should be paired with loading text or a labelled busy region when content loading needs announcement. Shimmer keeps its words as real text; put it in a status region when the change should be announced. Both hold still for reduced motion.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesSeparatorSeparate related content with a horizontal or vertical rule.3 examplesBannerBanner renders a compact announcement strip.5 examplesEmptyStateExplain empty collections, unavailable results and the next useful action.4 examples