Micro Expander

Buttons 43

About

Here is Micro Expander component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Micro Expander to your project and fits it to your theme.

Code

How Micro Expander is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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>
);
}