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 Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/apple-invites.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/apple-invites-demo.json"

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 React, { useState } from "react"

import AppleInvites, { 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://images.unsplash.com/photo-1593164842264-854604db2260?=jpg&fit=crop&w=640&q=80&fit=max",
    badge: "Hosting",
    participants: [{ avatar: "https://github.com/educlopez.png" }],
  },
  {
    id: 2,
    title: "Tyler Turns 3!",
    subtitle: "Sat, June 14, 3:00 PM",
    location: "Central Park",
    image:
      "https://images.unsplash.com/photo-1524293568345-75d62c3664f7?=jpg&fit=crop&w=640&q=80&fit=max",
    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://images.unsplash.com/photo-1592919505780-303950717480?=jpg&fit=crop&w=640&q=80&fit=max",
    badge: "Going",
    participants: [{ avatar: "https://github.com/educlopez.png" }],
  },
  {
    id: 4,
    title: "Movie Night",
    subtitle: "Fri, June 20, 8:00 PM",
    location: "Cine Town",
    image:
      "https://images.unsplash.com/photo-1571947453052-1e72ce0d19b9?=jpg&fit=crop&w=640&q=80&fit=max",
    badge: "Interested",
    participants: [{ avatar: "https://github.com/educlopez.png" }],
  },
]

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

export default AppleInvitesDemo

Props

Prop

Type

Description

events?

Event[]

Array of events to display. Each event: { id, title, subtitle, location, image, badge?, participants: [{ avatar }] }.

Object shape:

Field	Type	Description
id	number	Event id
title	string	Event title
subtitle	string	Event subtitle/date
location	string	Event location
image	string	Event image URL
badge	string	Event badge (optional)
participants	{ avatar: string }[]	Array of participant avatars

interval?

number

Time in ms between auto-advance.

className?

string

Optional additional class names for the root container.

cardClassName?

string

Class name for each event card.

activeIndex?

number

Controlled active event index.

onChange?

(index: number) => void

Callback when the active event changes.