Carousel

Install it

Source

1'use client';
2 
3import { forwardRef } from 'react';
4import { useComponentConfig } from '../config-provider/context';
5import CarouselUI from './CarouselUI';
6import type { CarouselProps } from './types';
7 
8const Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {
9  const config = useComponentConfig('carousel');
10 
11  const mergedProps = {
12    ...config,
13    ...props
14  };
15 
16  return (
17    <CarouselUI
18      {...mergedProps}
19      ref={ref}
20    />
21  );
22});
23 
24Carousel.displayName = 'Carousel';
25 
26export default Carousel;

What it pulls in

npm packages

• embla-carousel-react

Other registry items

• https://ui-play.skyroc.me/r/style.json
• https://ui-play.skyroc.me/r/button.json

Files it writes

• src/components/carousel/Carousel.tsx
• src/components/carousel/CarouselContent.tsx
• src/components/carousel/CarouselItem.tsx
• src/components/carousel/CarouselNext.tsx
• src/components/carousel/CarouselPrevious.tsx
• src/components/carousel/CarouselRoot.tsx
• src/components/carousel/CarouselUI.tsx
• src/components/carousel/carousel-variants.ts
• src/components/carousel/context.ts
• src/components/carousel/index.ts
• src/components/carousel/types.ts