# Shadowed Collapsible

> A collapsible panel with a soft shadow that lifts it off the page. Use it to highlight an expandable block of content inside a busy layout or feed.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/components-collapsible-shadowed-collapsible).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/components-collapsible-shadowed-collapsible
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/components-collapsible-shadowed-collapsible-light-bfeddf585f1fc3a6.png
- Registry item: https://www.shadcn-ui-blocks.com/r/components-collapsible-shadowed-collapsible.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/components-collapsible-shadowed-collapsible.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `radix-ui`

## Files

### `components/blocks/components/collapsible/shadowed-collapsible.tsx`

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState } from 'react';

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

  return (
    <div className="mx-auto max-w-md py-6">
      <Collapsible
        className={cn(
          'w-full overflow-hidden rounded-md transition-shadow duration-300',
          isOpen ? 'shadow-md' : 'shadow-sm'
        )}
        open={isOpen}
        onOpenChange={setIsOpen}
      >
        <div className="bg-muted/10">
          <CollapsibleTrigger className="hover:bg-muted/20 flex w-full items-center justify-between px-4 py-3 transition-colors">
            <span className="font-medium">Product Specifications</span>
            {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="from-muted/10 bg-gradient-to-b to-transparent px-4 py-3 text-sm">
            <ul className="space-y-2">
              <li>
                <span className="font-medium">Dimensions:</span> 10&quot; x
                8&quot; x 2&quot;
              </li>
              <li>
                <span className="font-medium">Weight:</span> 1.5 lbs
              </li>
              <li>
                <span className="font-medium">Material:</span> Aluminum and
                high-grade plastic
              </li>
              <li>
                <span className="font-medium">Battery Life:</span> Up to 12
                hours
              </li>
            </ul>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}
```

### `components/ui/collapsible.tsx`

```tsx
"use client"

import { Collapsible as CollapsiblePrimitive } from "radix-ui"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
```