FeedbackNew
Glass Skeleton
A quiet glass placeholder with a slow sheen, shaped like what will replace it.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-skeletonPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-skeletonWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-skeleton itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-skeleton.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
clsx
Installed files
components/glassyui/glass-skeleton.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassSkeleton } from "@/components/glassyui/glass-skeleton";
export function LoadingProfile() {
return (
<div aria-busy="true">
<GlassSkeleton variant="circle" />
<GlassSkeleton variant="text" lines={2} />
</div>
);
}Examples
<GlassSkeleton style={{ height: 120, borderRadius: 20 }} />API
GlassSkeletonA placeholder block. It is hidden from assistive technology.
variantblock (default, sized with CSS), circle (square and round) or text (a stack of lines).
linesHow many lines a text skeleton draws. The last is shorter. Defaults to 3.
Notes
Accessibility
Skeletons are aria-hidden. Set aria-busy on the region that is loading so assistive technology knows to wait.
Motion
The sheen is a single transform per skeleton, stepped at 30 frames a second to spare the GPU. Reduced motion leaves the placeholders still.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.