ComponentsApple Invites

Apple Invites

Inspired by Apple's design, this component showcases a collection of event invites with smooth animations and transitions.

Movie Night
Interested
Participant 1

Movie Night

Fri, June 20, 8:00 PM

Cine Town

Yoga
Hosting
Participant 1

Yoga

Sat, June 14, 6:00 AM

Central Park

Tyler Turns 3!
Going
Participant 1

Tyler Turns 3!

Sat, June 14, 3:00 PM

Central Park

Code

1

Install with shadcn

Terminal

npx shadcn@latest add @smoothui/apple-invites

Or install the demo

Terminal

npx shadcn@latest add @smoothui/apple-invites-demo
2

Add the CSS

global.css

//Progressive Blur
.gradient-mask-t-0 {
    -webkit-mask-image: linear-gradient(#0000, #000);
    mask-image: linear-gradient(#0000, #000);
}

How to use

Demo.tsx

"use client"

import { useState } from "react"

import AppleInvites from "@/components/smoothui/ui/AppleInvites"
import type { Event } from "@/components/smoothui/ui/AppleInvites"

const demoEvents: Event[] = [
  {
    id: 1,
    title: "Yoga",
    subtitle: "Sat, June 14, 6:00 AM",
    location: "Central Park",
    image:
      "https://res.cloudinary.com/dyzxnud9z/image/upload/w_640,ar_1:1,c_fill,g_auto/v1758265917/smoothui/yogaday.webp",
    badge: "Hosting",
    participants: [{ avatar: "https://github.com/haydenbleasel.png" }],
  },
  {
    id: 2,
    title: "Tyler Turns 3!",
    subtitle: "Sat, June 14, 3:00 PM",
    location: "Central Park",
    image:
      "https://res.cloudinary.com/dyzxnud9z/image/upload/w_640,ar_1:1,c_fill,g_auto/v1758265165/smoothui/park.webp",
    badge: "Going",
    participants: [{ avatar: "https://github.com/educlopez.png" }],
  },
  {
    id: 3,
    title: "Golf party",
    subtitle: "Sun, April 15, 9:00 AM",
    location: "Golf Park",
    image:
      "https://res.cloudinary.com/dyzxnud9z/image/upload/w_640,ar_1:1,c_fill,g_auto/v1758265999/smoothui/golf.webp",
    badge: "Going",
    participants: [{ avatar: "https://github.com/shadcn.png" }],
  },
  {
    id: 4,
    title: "Movie Night",
    subtitle: "Fri, June 20, 8:00 PM",
    location: "Cine Town",
    image:
      "https://res.cloudinary.com/dyzxnud9z/image/upload/w_640,ar_1:1,c_fill,g_auto/v1758265903/smoothui/movie.webp",
    badge: "Interested",
    participants: [{ avatar: "https://github.com/rauchg.png" }],
  },
]

const AppleInvitesDemo = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  return (
    <AppleInvites
      events={demoEvents}
      activeIndex={activeIndex}
      onChange={setActiveIndex}
    />
  )
}

export default AppleInvitesDemo

Props

PropTypeDefault
events?
Event[]
-
interval?
number
-
className?
string
-
cardClassName?
string
-
activeIndex?
number
-
onChange?
(index: number) => void
-