Flip Grid

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-grid.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-grid.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-grid.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-grid.json

---
import "@/components/motion-kit/flip-grid-element.ts";
import "@/components/motion-kit/flip-grid-item-element.ts";
---

<motion-flip-grid
  columns="3"
  duration="0.5"
  ease="power2.inOut"
  stagger="0"
  gap="1rem"
  class="w-full"
>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>
</motion-flip-grid>

import "@/components/motion-kit/flip-grid-element.ts";
import "@/components/motion-kit/flip-grid-item-element.ts";

export default function Page() {
  return (
    <motion-flip-grid
      columns={3}
      duration={0.5}
      ease="power2.inOut"
      stagger={0}
      gap="1rem"
      className="w-full"
    >
      <div className="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>
      <div className="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>
      <div className="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>
      <div className="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>
    </motion-flip-grid>
  );
}

<script setup>
import "@/components/motion-kit/flip-grid-element.ts";
import "@/components/motion-kit/flip-grid-item-element.ts";
</script>

<template>
  <motion-flip-grid
    :columns="3"
    :duration="0.5"
    ease="power2.inOut"
    :stagger="0"
    gap="1rem"
    class="w-full"
  >
    <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>
    <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>
    <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>
    <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>
  </motion-flip-grid>
</template>

<script>
  import "@/components/motion-kit/flip-grid-element.ts";
  import "@/components/motion-kit/flip-grid-item-element.ts";
</script>

<motion-flip-grid
  columns={3}
  duration={0.5}
  ease="power2.inOut"
  stagger={0}
  gap="1rem"
  class="w-full"
>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>
</motion-flip-grid>

<script type="module" src="/components/motion-kit/flip-grid-element.js"></script>
<script type="module" src="/components/motion-kit/flip-grid-item-element.js"></script>

<motion-flip-grid
  columns="3"
  duration="0.5"
  ease="power2.inOut"
  stagger="0"
  gap="1rem"
  class="w-full"
>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 1</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 2</div>
  <div class="flip-grid-item h-32 bg-white rounded-lg p-4">Item 3</div>
  <div class="flip-grid-item h-32 bg-slate-50 rounded-lg p-4">Item 4</div>
</motion-flip-grid>