Cards

Docs

Cards

A nice cards container that you can use to showcase different features of your app. You can also use it to showcase a collection of items like testimonials.

✨

🦄

🪄

Installation

Copy and paste the following code into your project.

import React from "react"
 
export function Cards({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      {React.Children.map(children, (child, i) => (
        <div
          className="relative left-0 z-20 flex h-[280px] w-[200px] items-center justify-center rounded-md bg-white drop-shadow-lg first:z-10 first:rotate-[-5deg] last:z-10 last:rotate-[5deg] hover:z-30 hover:translate-y-[-20px] hover:rotate-[0deg] hover:scale-110 hover:shadow-2xl dark:bg-slate-800 [&:not(:first-child)]:ml-[-100px]"
          style={{
            transition: "0.4s ease-out",
          }}
          key={i}
        >
          {child}
        </div>
      ))}
    </div>
  )
}

Update the import paths to match your project setup.

Usage

import Cards from "@/registry/default/ui/cards"

<Cards>
  <div className="text-9xl">✨</div>
  <div className="text-9xl">🦄</div>
  <div className="text-9xl">🪄</div>
</Cards>

Card Slider Carousel