ComponentsApple Invites

Apple Invites

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

Interested

Movie Night

Fri, June 20, 8:00 PM

Cine Town

Hosting

Yoga

Sat, June 14, 6:00 AM

Central Park

Going

Tyler Turns 3!

Sat, June 14, 3:00 PM

Central Park

Code

Install with shadcn

Terminal

npx shadcn@latest add @smoothui/apple-invites

Or install the demo

Terminal

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

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"
import { getAllPeople, getAvatarUrl } from "@/app/doc/data/peopleData"

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: getAvatarUrl(getAllPeople()[0]?.avatar || "", 72),
      },
    ],
  },
  {
    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: getAvatarUrl(getAllPeople()[1]?.avatar || "", 72),
      },
    ],
  },
  {
    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: getAvatarUrl(getAllPeople()[2]?.avatar || "", 72),
      },
    ],
  },
  {
    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: getAvatarUrl(getAllPeople()[3]?.avatar || "", 72),
      },
    ],
  },
]

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

export default AppleInvitesDemo

Props

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

Expandable Cards

This component allows users to interact with a set of cards that can be expanded to reveal more information. It features smooth animations and is designed to enhance user engagement through visual feedback.

Phototab

A configurable tabbed photo display component with animated tab transitions, supporting custom icons and images