Morph Expand Card: Free React + Tailwind Component

Click a card to morph it seamlessly into a centered detail panel via shared layout; only one card in a group is expanded at a time.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add morph-expand-card.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Grid columnscolumns

Hide the default close buttonhideDefaultClose

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<MorphExpandCard/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/morph-expand-card.en.json

Or, once registries are configured in components.json, install it as @webberui/morph-expand-card.

Each MorphExpandCard holds one MorphExpandCardSummary (the collapsed content) and one MorphExpandCardDetail (the expanded detail). When wrapped in a MorphExpandGroup, only one card in the group is expanded at a time.

import {
  MorphExpandGroup,
  MorphExpandCard,
  MorphExpandCardSummary,
  MorphExpandCardDetail,
} from "@/components/ui/morph-expand-card";

<MorphExpandGroup columns={2}>
  <MorphExpandCard value="a" label="Nebula filter">
    <MorphExpandCardSummary>
      <div className="p-4 font-semibold">Nebula filter</div>
    </MorphExpandCardSummary>
    <MorphExpandCardDetail>
      <div className="p-6">The full detail content…</div>
    </MorphExpandCardDetail>
  </MorphExpandCard>
</MorphExpandGroup>;

A single card also works on its own (without a MorphExpandGroup), in which case it manages its own expand / collapse state.

Controlled mode

Pass value and onValueChange to MorphExpandGroup to control which card is expanded from outside:

const [open, setOpen] = React.useState<string | null>(null);

<MorphExpandGroup value={open} onValueChange={setOpen}>
  {/* … */}
</MorphExpandGroup>;

Custom close button

The detail panel provides a close button in the top-right corner by default. To place it yourself, pass hideDefaultClose to MorphExpandCardDetail and drop a MorphExpandCardClose anywhere in the content:

import { MorphExpandCardClose } from "@/components/ui/morph-expand-card";

<MorphExpandCardDetail hideDefaultClose>
  <MorphExpandCardClose className="left-3" />
  {/* … */}
</MorphExpandCardDetail>;

Props

MorphExpandGroup

Prop	Type	Default	Description
`value`	`string \| null`	—	Controlled mode: the value of the currently expanded card (`null` collapses everything)
`defaultValue`	`string \| null`	`null`	Initial expanded value in uncontrolled mode
`onValueChange`	`(value: string \| null) => void`	—	Fires when the expanded / collapsed state changes
`columns`	`number`	`2`	Number of grid columns (1–6)
`children`	`ReactNode`	—	Put `MorphExpandCard` children here