Components
Loading preview...
A lightweight lazy-loading image with a skeleton shimmer and smooth fade-in. Supports placeholders, in-view loading, and responsive aspect ratios out of the box.
npx shadcn@latest add https://21st.dev/r/sshahaider/lazy-image'use client';
import React from 'react';
import { LazyImage } from '@/components/ui/lazy-image';
import { Button } from '@/components/ui/button';
export default function Demo() {
const [instance, setInstance] = React.useState(0);
return (
<LazyImageDemo
key={instance}
onReload={() => setInstance((prev) => prev + 1)}
/>
);
}
function LazyImageDemo({ onReload }: { onReload: () => void }) {
const [seed] = React.useState(() => Math.floor(Math.random() * 1000));
const imageUrl = `https://picsum.photos/seed/${seed}/1280/720`;
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 p-4">
<Button onClick={onReload}>Load Image</Button>
<div className="mx-auto w-full max-w-4xl">
<LazyImage
alt="Random"
src={imageUrl}
ratio={16 / 9}
fallback="https://placehold.co/1280x720?text=fallback-image"
/>
</div>
</div>
);
}