50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1487,'use client'; import * as React from 'react'; import { motion, type Transition } from 'motion/react'; import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel'; import useEmblaCarousel from 'embla-carousel-react'; import { Button } from '@/components/animate-ui/components/buttons/button'; import { ChevronRight, ChevronLeft } from 'lucide-react'; type PropType = { slides: number[]; options?: EmblaOptionsType; }; type EmblaControls = { selectedIndex: number; scrollSnaps: number[]; prevDisabled: boolean; nextDisabled: boolean; onDotClick: (index: number) => void; onPrev: () => void; onNext: () => void; }; type DotButtonProps = { selected?: boolean; label: string; onClick: () => void; }; const transition: Transition = { type: 'spring', stiffness: 240, damping: 24, mass: 1, }; const useEmblaControls = ( emblaApi: EmblaCarouselType | undefined, ): EmblaControls => { const [selectedIndex, setSelectedIndex] = React.useState(0); const [scrollSnaps, setScrollSnaps] = React.useState([]); const [prevDisabled, setPrevDisabled] = React.useState(true); const [nextDisabled, setNextDisabled] = React.useState(true); const onDotClick = React.useCallback( (index: number) => emblaApi?.scrollTo(index), [emblaApi], ); const onPrev = React.useCallback(() => emblaApi?.scrollPrev(), [emblaApi]); const onNext = React.useCallback(() => emblaApi?.scrollNext(), [emblaApi]); const updateSelectionState = (api: EmblaCarouselType) => { setSelectedIndex(api.selectedScrollSnap()); setPrevDisabled(!api.canScrollPrev()); setNextDisabled(!api.canScrollNext()); }; const onInit = React.useCallback((api: EmblaCarouselType) => { setScrollSnaps(api.scrollSnapList()); updateSelectionState(api); }, []); const onSelect = React.useCallback((api: EmblaCarouselType) => { updateSelectionState(api); }, []); React.useEffect(() => { if (!emblaApi) return; onInit(emblaApi); emblaApi.on('reInit', onInit).on('select', onSelect); return () => { emblaApi.off('reInit', onInit).off('select', onSelect); }; }, [emblaApi, onInit, onSelect]); return { selectedIndex, scrollSnaps, prevDisabled, nextDisabled, onDotClick, onPrev, onNext, }; }; function MotionCarousel(props: PropType) { const { slides, options } = props; const [emblaRef, emblaApi] = useEmblaCarousel(options); const { selectedIndex, scrollSnaps, prevDisabled, nextDisabled, onDotClick, onPrev, onNext, } = useEmblaControls(emblaApi); return (

{slides.map((index) => { const isActive = index === selectedIndex; return ( {index + 1} ); })}

{scrollSnaps.map((_, index) => ( onDotClick(index)} /> ))}

); } function DotButton({ selected = false, label, onClick }: DotButtonProps) { return ( {label} ); } export { MotionCarousel }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","embla-carousel",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"embla-carousel"}]]}]}],["$","li","embla-carousel-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"embla-carousel-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@animate-ui/components-buttons-button"]}]]}],["$","$L51",null,{"sourceUrl":"https://animate-ui.com/r/components-community-motion-carousel.json","proxyUrl":"https://shadcnregistry.com/r/animate-ui/components-community-motion-carousel","itemId":"@animate-ui/components-community-motion-carousel"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/components/community/motion-carousel/index.tsx","content":"$53","type":"registry:ui","target":"components/animate-ui/components/community/motion-carousel.tsx"}]}]]}],"$L54"]}]

Motion Carousel

Installation

Files

components

Styles