Icon Collapsible

A collapsible row with a chevron icon that rotates as the panel opens and closes. Use it in menus where a clear visual cue tells readers it expands.

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, ChevronUp, ShoppingCart } from 'lucide-react';
import { useState } from 'react';

export default function IconCollapsible() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="mx-auto max-w-md py-6">
      <Collapsible
        className="w-full overflow-hidden rounded-md border"
        open={isOpen}
        onOpenChange={setIsOpen}
      >
        <div className="bg-muted/5 border-b">
          <CollapsibleTrigger className="hover:bg-muted/10 flex w-full items-center justify-between px-4 py-3 transition-colors">
            <div className="flex items-center gap-3">
              <div className="bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full">
                <ShoppingCart className="text-primary h-4 w-4" />
              </div>
              <span className="font-medium">Order Details</span>
            </div>
            {isOpen ? (
              <ChevronUp className="h-4 w-4 shrink-0 transition-transform duration-200" />
            ) : (
              <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
            )}
          </CollapsibleTrigger>
        </div>
        <CollapsibleContent>
          <div className="text-muted-foreground px-4 py-3 text-sm">
            <ul className="space-y-2">
              <li className="flex justify-between">
                <span>Product</span>
                <span className="font-medium">Premium Widget</span>
              </li>
              <li className="flex justify-between">
                <span>Quantity</span>
                <span className="font-medium">2</span>
              </li>
              <li className="flex justify-between">
                <span>Price</span>
                <span className="font-medium">$99.99</span>
              </li>
              <li className="mt-2 flex justify-between border-t pt-2">
                <span>Total</span>
                <span className="font-medium">$199.98</span>
              </li>
            </ul>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

About this block

Icon Collapsible is a single expandable row. A trigger bar stretches the full width of the panel and holds, on the left, a circular icon badge next to a bold label, and on the right, a chevron that points down when the panel is closed and up when it is open. Clicking anywhere on the trigger toggles the panel. The expanded area reveals a simple key/value list with a ruled total row at the bottom.

The label, icon, and every line in the detail list are independent. You can swap the shopping cart icon for any other icon, rename the heading, add or remove rows from the list, and change the values without touching the layout or the toggle behavior.

When to use

Reach for this block when you need a compact summary that users can expand for a quick breakdown without leaving the current view. In a project management workspace it fits naturally anywhere a task, budget item, or resource summary should stay tucked until a team member wants the specifics. It works better than a full accordion group when there is only one panel to show, and better than a plain card when the content is secondary and should not compete with the surrounding layout.

A natural flow around it on a Components page:

Before

Cards to display the primary content that this collapsible supplements
Badges to label the status or category of the item before readers decide to expand

After

Grouped Collapsible when the single row grows into multiple related sections
Accordions if the expanded content becomes rich enough to need section headings

What you can customize

The block has three distinct parts you can adapt independently:

Icon badge. Swap the icon inside the circular badge to match the subject, whether that is a task, a file type, or a team member.
Trigger label. The heading text and the chevron sit in the same row, so renaming the label is the only change needed to reframe the whole panel for a new context.
Detail rows. Each row in the expanded list is a label/value pair; add, remove, or relabel them, and move the divider rule to wherever a subtotal or summary line makes sense.

Tip: keep the detail list to four or five rows so the expanded panel stays short enough to read at a glance without scrolling.

About this block

When to use

A natural flow around it on a Components page:

Before

Cards to display the primary content that this collapsible supplements
Badges to label the status or category of the item before readers decide to expand

After

Grouped Collapsible when the single row grows into multiple related sections
Accordions if the expanded content becomes rich enough to need section headings

What you can customize

The block has three distinct parts you can adapt independently:

Icon badge. Swap the icon inside the circular badge to match the subject, whether that is a task, a file type, or a team member.
Trigger label. The heading text and the chevron sit in the same row, so renaming the label is the only change needed to reframe the whole panel for a new context.
Detail rows. Each row in the expanded list is a label/value pair; add, remove, or relabel them, and move the divider rule to wherever a subtotal or summary line makes sense.

Tip: keep the detail list to four or five rows so the expanded panel stays short enough to read at a glance without scrolling.

Icon Collapsible

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize