Components
Loading preview...
Here is Micro Expander component
@iamsatish4564
npx shadcn@latest add https://21st.dev/r/iamsatish4564/micro-expander'use client';
import { MicroExpander } from '@/components/ui/micro-expander';
import { Plus, Eye, Settings, Trash2 } from 'lucide-react';
export default function MicroExpanderVariants() {
return (
<div className="w-full min-h-[200px] grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-4 gap-8 place-items-center p-4">
{/* NOTE: This layout uses container queries (@md, @lg).
For this to work in your own application, the parent element of this component
must have the Tailwind CSS class "@container". */}
{/* Default Variant */}
<MicroExpander text="Create New" icon={<Plus className="w-5 h-5" />} />
{/* Outline Variant */}
<MicroExpander
text="View Details"
variant="outline"
icon={<Eye className="w-5 h-5" />}
/>
{/* Ghost Variant */}
<MicroExpander
text="Settings"
variant="ghost"
icon={<Settings className="w-5 h-5" />}
/>
{/* Destructive Variant */}
<MicroExpander
text="Delete Item"
variant="destructive"
icon={<Trash2 className="w-5 h-5" />}
/>
</div>
);
}