║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: MotionCards description: Elegant cards in seamless flow for clean web design.

<ComponentPreview name="motioncards-demo" className="p-0" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="motioncards" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>motioncards.tsx</code> </p> <ComponentSource name="motioncards" /> </Steps> </TabsContent> </Tabs>

Usage

import MotionCards, { MotionCardContent } from "@/components/ui/motioncards";

<MotionCards interval={1300}>
      <MotionCardContent>
        <div className="p-4 text-center">Card 1: Analytics</div>
      </MotionCardContent>
      <MotionCardContent>
        <div className="p-4 text-center">Card 2: Performance</div>
      </MotionCardContent>
      <MotionCardContent>
        <div className="p-4 text-center">Card 3: Components</div>
      </MotionCardContent>
      <MotionCardContent>
        <div className="p-4 text-center">Card 4: Developers</div>
      </MotionCardContent>
    </MotionCards>

API Reference

MotionCards

Elegant cards in seamless flow for clean web design.

Props

<PropsTable rows={[ { prop: "children", type: "ReactNode", default: "required", description: "The content of each card. Can be any valid ReactNode. Required." }, { prop: "interval", type: "number", default: "2000", description: "Time in milliseconds between card transitions. Optional." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║