Components
Loading preview...
Display a skeleton whilst another component is loading.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/skeletonimport React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
export const DefaultWithSetWidth = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Default with set width</div>
<Skeleton width={160} />
</div>
)
export const DefaultWithBoxHeight = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Default with box height</div>
<Skeleton boxHeight={42} width={160} />
</div>
)
export const WrappingChildren = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Wrapping children</div>
<Skeleton>
<Button>Hidden by skeleton</Button>
</Skeleton>
<Skeleton show={false}>
<Button>Not hidden by skeleton</Button>
</Skeleton>
</div>
)
export const WrappingChildrenWithFixedSize = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Wrapping children with fixed size</div>
<Skeleton height={100} width="100%">
{null}
</Skeleton>
<Skeleton height={100} width="100%">
<Button>Not hidden by Skeleton</Button>
</Skeleton>
</div>
)
export const Pill = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Pill</div>
<Skeleton pill width={48} />
</div>
)
export const Rounded = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Rounded</div>
<Skeleton boxHeight={48} height={48} rounded width={48} />
</div>
)
export const Squared = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">Squared</div>
<Skeleton boxHeight={48} height={48} squared width={48} />
</div>
)
export const NoAnimation = () => (
<div className="flex flex-col gap-4">
<div className="font-bold text-xl dark:text-white">No animation</div>
<Skeleton animated={false} height={100} width="100%">
{null}
</Skeleton>
</div>
);