Login
Docs
Card Slider

Card Slider

A slider that can be used to display a collection of cards or other content. With support for touch gestures.

Loading...

Installation

Copy and paste the following code into your project.

export function CardSliderItem({ children }: { children: React.ReactNode }) {
  return (
    <div className="mr-[15px] inline-flex h-[350px] w-[400px] items-center justify-center rounded-md bg-white last:mr-[15px] dark:bg-slate-800">
      {children}
    </div>
  )
}
 
export function CardSlider({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="mx-auto my-0  w-full max-w-[600px] p-4">
      <div className="mx-[-15px] overflow-hidden">
        <div
          className="-mb-5 block overflow-x-auto whitespace-nowrap p-4 pb-[30px]"
          style={{
            // @ts-ignore
            "-webkit-overflow-scrolling": "touch",
          }}
        >
          {children}
        </div>
      </div>
    </div>
  )
}

Update the import paths to match your project setup.

Usage

import CardSlider, { CardSliderItem } from "@/registry/default/ui/card-slider"
<CardSlider>
  <CardSliderItem>
    <div className="text-8xl">✨</div>
  </CardSliderItem>
  <CardSliderItem>
    <div className="text-8xl">🪄</div>
  </CardSliderItem>
</CardSlider>
Circular WavesCards