TkxSkeleton

Shapes

import { TkxSkeleton } from 'tekivex-ui';

{loading
  ? <TkxSkeleton width={200} height={20} />
  : <span>{user.name}</span>
}

Shapes

<TkxSkeleton width={200} height={20} />          {/* default rect */}
<TkxSkeleton width={200} height={20} rounded />  {/* rounded rect */}
<TkxSkeleton variant="circle" width={40} />      {/* circle (avatar) */}
<TkxSkeleton variant="text" />                   {/* text line, full width */}

Multiple lines

<TkxSkeleton variant="text" count={3} />
{/* 3 stacked text lines, last one slightly shorter for realism */}

Compose a card skeleton

Composed card skeleton

<TkxCard>
  <TkxCardBody>
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <TkxSkeleton variant="circle" width={48} />
      <div style={{ flex: 1 }}>
        <TkxSkeleton width="60%" height={16} />
        <TkxSkeleton width="40%" height={12} style={{ marginTop: 6 }} />
      </div>
    </div>
    <TkxSkeleton variant="text" count={3} style={{ marginTop: 12 }} />
  </TkxCardBody>
</TkxCard>

RSC compatible

Pure CSS animation, no hooks. Renders in Next.js Server Components.

Accessibility

• Skeleton is aria-hidden="true" — screen readers don’t announce noise
• Pair with a parent element carrying aria-busy="true" or aria-live region so assistive tech knows content is loading
• Animation respects prefers-reduced-motion — shimmer becomes static when reduced motion is enabled

Props

Prop	Type	Required	Description
width	number | string		Numeric (px) or any CSS length.
height	number | string		Same.
variant	'rect' | 'text' | 'circle'		Defaults to rect.
rounded	boolean		Apply 6px border-radius (rect only).
count	number		For variant="text" — render N stacked lines.

Source

src/components/TkxSkeleton.tsx