@hanzo/ui
GitHubnpm
AccordionAlert DialogAspect RatioAvatarBadgeButtonCardCheckboxCollapsibleCommandContext MenuDialogDropdown MenuGlassHover CardInputLabelPopoverProgressRadio GroupResizableLayoutScroll AreaSelectBandScreenSliderSpinnerSwitchTabsTextareaToasterToggle GroupTooltipFormProseLinkVideoCarouselSheetSkeletonMedia StackNav ItemsBreadcrumbStep IndicatorInput OtpNavigation MenuDrawer3d CardAdvanced ChartAndroid3d PinAlert3d MarqueeAnnouncementAnimated TooltipAnimated BeamAnimated TestimonialsAnimated CursorApple Cards CarouselApple Hello EffectBannerChoiceboxCalendarCode EditorCode BlockCompany ProfileCredit CardComparisonCode TabsComboboxColor PickerCrypto ScreenerCursorCrypto MarketDesktopData TableDate PickerDialog StackDesktop WindowDropzoneEditorDockDesktop SpotlightEmptyForex ScreenerForex MarketGanttFinancials

Apple Cards Carousel

import { AppleCardsCarousel, gradientPresets } from '@hanzo/ui'

Default

Three gradient cards, auto-playing every five seconds with arrows and dots.

InnovationThink DifferentPushing the boundaries of what's possible with cutting-edge technology.
export function Default() {

  return (

    <AppleCardsCarousel
      cards={featured}
      autoPlay
      autoPlayInterval={5000}
      showArrows
      showDots
    />

  )

}

With images

Each card's photo slides against the drag for depth; a wider offset and flatter scale fan the stack out.

Mountain Vista
Mountain VistaExplore NatureDiscover breathtaking mountain landscapes
export function WithImages() {

  const cards: CarouselCard[] = [

    {

      id: "1",

      title: "Mountain Vista",

      subtitle: "Explore Nature",

      description: "Discover breathtaking mountain landscapes",

      image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=80",

    },

    {

      id: "2",

      title: "Ocean Waves",

      subtitle: "Feel the Freedom",

      description: "Experience the calming rhythm of the sea",

      image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=1600&q=80",

    },

  ]

  return (

    <AppleCardsCarousel
      cards={cards}
      parallaxOffset={100}
      stackOffset={20}
      stackScale={0.9}
    />

  )

}

Custom content

A card's `content` replaces its title, subtitle and description entirely.

CustomAny content renders here
export function CustomContent() {

  const cards: CarouselCard[] = [

    {

      id: "1",

      title: "Custom",

      gradient: gradientPresets.aurora,

      content: (

        <YStack items="center" justify="center" height="100%" gap="$3">

          <SizableText size="$12" fontWeight="700" color="white">

            Custom

          </SizableText>

          <SizableText size="$6" color="rgba(255,255,255,0.8)">

            Any content renders here

          </SizableText>

        </YStack>

      ),

    },

    { id: "2", title: "Second Card", gradient: gradientPresets.peach },

    { id: "3", title: "Third Card", gradient: gradientPresets.forest },

  ]

  return <AppleCardsCarousel cards={cards} />

}

Minimal

Arrows and dots and auto-play all off, leaving a plain draggable stack.

First Card
export function Minimal() {

  const cards: CarouselCard[] = [

    { id: "1", title: "First Card", gradient: gradientPresets.lavender },

    { id: "2", title: "Second Card", gradient: gradientPresets.fire },

    { id: "3", title: "Third Card", gradient: gradientPresets.ocean },

  ]

  return (

    <AppleCardsCarousel
      cards={cards}
      showArrows={false}
      showDots={false}
      autoPlay={false}
    />

  )

}

Types

export type CarouselCard = {

  id: string

  title: string

  subtitle?: string

  description?: string

  image?: string

  gradient?: string

  content?: React.ReactNode

}
export type AppleCardsCarouselProps = {

  cards: CarouselCard[]

  autoPlay?: boolean

  autoPlayInterval?: number

  className?: string

  cardClassName?: string

  showArrows?: boolean

  showDots?: boolean

  parallaxOffset?: number

  stackOffset?: number

  stackScale?: number

  swipeThreshold?: number

}

Exports

AppleCardsCarouselgradientPresetstype AppleCardsCarouselPropstype CarouselCard