Components
Loading preview...
Morphing Loader Component
npx shadcn@latest add https://21st.dev/r/uniquesonu/morphing-loaderimport MorphingLoader from "@/components/ui/morphing-loader";
export default function DemoOne() {
return <div className="bg-gray-50 min-h-screen w-full p-8 space-y-16">
<div className="text-center">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Morphing Loader Component</h1>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Default loader */}
<div className="bg-white rounded-lg p-8 shadow-sm">
<h3 className="text-lg text-gray-800 font-semibold mb-4 text-center">Default</h3>
<MorphingLoader />
</div>
{/* Custom text and colors */}
<div className="bg-white rounded-lg p-8 shadow-sm">
<h3 className="text-lg font-semibold mb-4 text-center text-gray-800">Custom Text & Colors</h3>
<MorphingLoader
text="Processing"
subtitle="Analyzing your data..."
colors={[
['#ef4444', '#f97316'],
['#8b5cf6', '#ec4899'],
['#06b6d4', '#3b82f6']
]}
/>
</div>
</div>
</div>;
}