Flx

Implementation

pnpm dlx shadcn@latest add @flx/carousel-01

Variations

The block supports a titlePlacement prop that controls where the animated title appears: outside (above the image, default) or inside (overlaid at the bottom of the image with a gradient).

Title inside the image

When titlePlacement is inside, the title appears overlaid at the bottom of each image with a gradient background.

carousel-01-title-inside.tsx
import { Carousel01, type Carousel01Props } from '../carousel-01'

export const values = {
    titlePlacement: 'inside' as const,
    items: [
      {
        title: 'Ship faster',
        media: {
          src: 'https://images.unsplash.com/photo-1610611742876-97e4d834d077?q=80&w=1170&auto=format&fit=crop',
          aspect: 'landscape' as const,
        },
      },
      {
        title: 'Performance first',
        media: {
          src: 'https://images.unsplash.com/photo-1688327009265-3e47cdab9dc4?q=80&w=1169&auto=format&fit=crop',
          aspect: 'portrait' as const,
        },
      },
      {
        title: 'Stay in control',
        media: {
          src: 'https://images.unsplash.com/photo-1610210162763-6c4d6da47c8f?q=80&w=1170&auto=format&fit=crop',
          aspect: 'landscape' as const,
        },
      },
      {
        title: 'Built together',
        media: {
          src: 'https://images.unsplash.com/photo-1672917765736-c1c397a5d37f?q=80&w=1170&auto=format&fit=crop',
          aspect: 'portrait' as const,
        },
      },
    ],
} satisfies Carousel01Props

export function Carousel01TitleInside() {
  return <Carousel01 {...values} />
}