Skeleton

Skeleton placeholders are temporary content layout previews.

import { component$ } from '@builder.io/qwik';
import { Skeleton } from '~/components/ui';

export default component$(() => {
  return (
    <div class="flex items-center space-x-4">
      <Skeleton class="h-12 w-12 rounded-full" />
      <div class="space-y-2">
        <Skeleton class="h-4 w-[250px]" />
        <Skeleton class="h-4 w-[200px]" />
      </div>
    </div>
  );
});

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add skeleton

import { type PropsOf, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
export const Skeleton = component$<PropsOf<'div'>>(({ ...props }) => {
  return (
    <div {...props} class={cn('animate-pulse rounded bg-foreground/10', props.class)} />
  );
});

Usage

import { Skeleton } from '~/components/ui';

<Skeleton class="h-6 w-24 rounded-full" />

Examples

Card

import { component$ } from '@builder.io/qwik';
import { Skeleton } from '~/components/ui';

export default component$(() => {
  return (
    <div class="flex flex-col space-y-3">
      <Skeleton class="h-32 w-64 rounded-3xl" />
      <div class="space-y-2">
        <Skeleton class="h-4 w-64" />
        <Skeleton class="h-4 w-48" />
      </div>
    </div>
  );
});