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
1
Install with shadcn
Terminal
npx shadcn@latest add @smoothui/apple-invitesOr install the demo
Terminal
npx shadcn@latest add @smoothui/apple-invites-demo2
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 | - |