Carousel card

Galleries

About

carousel card

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Carousel card to your project and fits it to your theme.

Code

How Carousel card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CarouselCard from "@/components/ui/carousel-card-2"

const CARD_DATA = [
  {
    id: 1,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/32/327d86ff3c8677219d40f97a247835c0891937f937552d2b325ddd63b624ad52.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 2,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/1c/1c98bce1616253e23af6f690181e6c2c84968ce51ecb9512e287920ec97c336a.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 3,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/1c/1cfeaad844afe4dafa6c97fc14bff442b61f17a95e195e6b97638f380b018b01.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 4,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/72/72dd368074e81932714c055cdda66d748cbd3e54716717a0f566087c25ffac31.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 5,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/61/61fcb9b5b171e9aca51c658ffd3b0f4d61d1efea33a3acb80e1e5bffb7ecf740.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
  {
    id: 6,
    imgUrl: 'https://cdn.21st.dev/assets/mirror/58/582a4459bcc56fecf623fef73a326cfa18ae0b963fe4972980b82bdec7ac9185.jpg',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices dolor ac massa maximus, blandit ullamcorper eros accumsan. Sed facilisis lacinia venenatis. Donec bibendum, eros ut porttitor consectetur, enim sapien vehicula mi, et consequat lacus turpis vel dolor. Vestibulum sagittis facilisis ipsum vitae suscipit. Proin in nisl sollicitudin, interdum erat eu, consequat odio. Sed auctor felis ac lorem molestie, a cursus elit malesuada. Etiam et varius erat. Aliquam pharetra convallis aliquet. Vestibulum eros ipsum, sodales ac imperdiet id, pellentesque sed tortor.',
  },
];

const Demo = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <CarouselCard data={CARD_DATA}/>
    </div>
  );
};

export { Demo };