Apple Invites

A carousel component displaying event cards with images, titles, and locations. It adjusts layout based on screen size and uses animations for transitions. Use it to showcase a series of events in a visually engaging way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/apple-invites

npx layro-cli add @educlopez/apple-invites

npx layro-cli add @educlopez/apple-invites

bunx layro-cli add @educlopez/apple-invites

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

Code

Demo

"use client";

import { Crown } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { wrap } from "popmotion";
import { useEffect, useMemo, useRef, useState } from "react";

export interface ResponsiveSize {
  "2xl"?: number | string;
  base?: number | string;
  lg?: number | string;
  md?: number | string;
  sm?: number | string;
  xl?: number | string;