Preview

Advanced Analytics

Advanced Analytics

Data Insights

Get detailed insights and analytics to make informed decisions for your business growth.

Team Collaboration

Team Collaboration

Work Together

Collaborate seamlessly with your team members using our advanced collaboration tools.

Installation

<> import.ts
import { BeautifulImageCarousel, BeautifulCardCarousel } from "@/components/ui/carousel"

Code

<> component.tsx
import { Carousel } from "@/components/ui/carousel"

<Carousel />

API Reference

Carousel

A card carousel with images and textual content, built on slick.

<> import.ts
import { BeautifulCardCarousel } from "@/components/ui/carousel"

Props

PropTypeDefaultDescription
data
Array<{ id: number | string; title: string; subtitle: string; description: string; image: string; gradient?: string }>—Card slides to render
itemsPerView
number3Cards visible at once
showPagination
booleantrueShow dot indicators
autoPlay
booleanfalseEnable autoplay
autoPlaySpeed
number5000Autoplay interval in ms
showArrows
booleantrueShow previous/next arrows
arrowsInside
booleanfalsePlace arrows inside the slide area

Examples

Example 1
<> example.tsx
// Basic carousel
<BeautifulCardCarousel />
Example 2
<> example.tsx
// Two cards per view
<BeautifulCardCarousel itemsPerView={2} />
Example 3
<> example.tsx
// With autoplay and inside arrows
<BeautifulCardCarousel
  itemsPerView={2}
  autoPlay={true}
  autoPlaySpeed={4000}
  arrowsInside={true}
/>