Component primitive

Brand Skeleton

<brand-skeleton> wraps Web Awesome's <wa-skeleton>. Size via width / height on the host; animate with effect.

<brand-skeleton>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-skeleton>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Effects

Paragraph placeholder

Avatar + line placeholder

Usage

import { BrandSkeleton } from '@brandos/ui';

<brand-skeleton class="bos:h-4 bos:w-full"></brand-skeleton>
<brand-skeleton effect="pulse" class="bos:size-12 bos:[--brand-skeleton-border-radius:9999px]"></brand-skeleton>
<brand-skeleton effect="sheen" class="bos:h-3 bos:w-3/5"></brand-skeleton>