Card Split Accordian

Renders an animated card split accordion that expands to show detailed content. It smoothly transitions between states and adjusts layout based on open state. Use when showing structured information with expandable sections.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/card-split-accordian

npx layro-cli add @watermeloncorp/card-split-accordian

npx layro-cli add @watermeloncorp/card-split-accordian

bunx layro-cli add @watermeloncorp/card-split-accordian

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState, type FC } from 'react';
import { motion, MotionConfig, type Transition } from 'motion/react';
import { ChevronDown, Send } from 'lucide-react';
import { HiCursorArrowRipple } from 'react-icons/hi2';
import { Layers } from 'lucide-react';
import { IoIosTimer } from 'react-icons/io';
import { PiHandTap } from 'react-icons/pi';
import useMeasure from 'react-use-measure';

export interface AccordionItemData {
  id: number;
  title: string;