Skeleton

Implemented Feedback

Shimmer placeholder.

Kumo reference: kumo-ui.com/components/skeleton-line/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Text line

Show template

{% load wdj %}
<div class="flex w-full max-w-xs flex-col gap-4">
  {% include "wdj/components/skeleton.html" with width="85%" height="0.75rem" only %}
  {% include "wdj/components/skeleton.html" with width="70%" height="0.75rem" only %}
  {% include "wdj/components/skeleton.html" with width="40%" height="0.75rem" only %}
</div>

Card placeholder

Show template

{% load wdj %}
{% include "wdj/components/skeleton.html" with height="8rem" only %}

Avatar placeholder

Show template

{% load wdj %}
{% include "wdj/components/skeleton.html" with height="3rem" width="3rem" rounded="rounded-full" only %}

Custom widths and height

Show template

{% load wdj %}
{% include "wdj/components/skeleton.html" with width="75%" height="1.25rem" only %}{% include "wdj/components/skeleton.html" with width="45%" height="0.75rem" only %}

Block placeholder

Show template

{% load wdj %}
{% include "wdj/components/skeleton.html" with height="8rem" only %}

API Reference

Prop	Type	Default	Description
width	CSS length	unset	Width; pass the documented value shown in the examples.
height	CSS length	288 (Chart)	Height; pass the documented value shown in the examples.
rounded	string	unset	Rounded; pass the documented value shown in the examples.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract