<MagicCard />

<MagicCard />


  • This component is used for making an expandable card-like animation.
  • Passing in an isCardExpanded prop will make the card expand and collapse.
  • The expanded card is positioned absolutely and in the center of the screen.

An example of the component can be seen on the Expandable Card example.


interface MagicCardProps {
  isCardExpanded: boolean;
  children: JSX.Element;
  transition?: Transition;
  isBackgroundFadeEnabled?: boolean;
  onBackgroundFadeClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
Prop nameDefault valueDescription
isCardExpandedfalseWhether the card is expanded or not.
transition (opens in a new tab)set by framer-motionThe transition animation for the card.
isBackgroundFadeEnabledtrueWhether the background for the expanded card should show. This is good for creating contrast between the expanded card and the background.
onBackgroundFadeClickundefinedCallback function for when the background is clicked. This is useful for collapsing the card.