Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Skeleton

Visually or semantically separates content.

Installation

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

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

Usage

import { Skeleton } from '@qwik-ui/styled';
<Skeleton className="h-6 w-24 rounded-full" />

Examples

Card