@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/components/card.md

@@ -0,0 +1,228 @@
+# Card
+
+Card is a flexible container component.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+import { Card } from '@primereact/ui/card';
+
+export default function Preview() {
+    return (
+        <Card.Root className="max-w-sm mx-auto">
+            <Card.Body className="space-y-4">
+                <Card.Caption>
+                    <Card.Title> Pro Subscription</Card.Title>
+                    <Card.Subtitle>Everything you need to scale your workflow</Card.Subtitle>
+                </Card.Caption>
+                <Card.Content>
+                    <p> Get unlimited access to all features, priority support, and advanced analytics to help your team grow faster.</p>
+                </Card.Content>
+                <Card.Footer className="flex flex-col gap-4">
+                    <span className="text-lg font-medium">$29 / month</span>
+
+                    <Button fluid>Upgrade</Button>
+                </Card.Footer>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Card } from '@primereact/ui/card';
+```
+
+```tsx
+<Card.Root>
+    <Card.Body>
+        <Card.Caption>
+            <Card.Title />
+            <Card.Subtitle />
+        </Card.Caption>
+        <Card.Content />
+        <Card.Footer />
+    </Card.Body>
+</Card.Root>
+```
+
+## Examples
+
+### Basic
+
+A container with a header, body, and footer for structured content.
+
+```tsx
+import { Card } from '@primereact/ui/card';
+
+export default function BasicDemo() {
+    return (
+        <Card.Root className="max-w-sm mx-auto">
+            <Card.Body className="space-y-4">
+                <Card.Caption>
+                    <Card.Title>Starter Plan</Card.Title>
+                    <Card.Subtitle>For personal projects</Card.Subtitle>
+                </Card.Caption>
+
+                <Card.Content>
+                    <p className="m-0">Includes essential features, basic analytics and access to community support.</p>
+                </Card.Content>
+                <Card.Footer className="text-sm text-surface-500 dark:text-surface-400">Cancel anytime. No credit card required.</Card.Footer>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+```
+
+### With Form
+
+Use `Card`, `Card.Body`, `Card.Caption`, `Card.Title`, `Card.Subtitle`, `Card.Content`, `Card.Footer`, to create a simple card.
+
+```tsx
+'use client';
+import { Button } from '@primereact/ui/button';
+import { Card } from '@primereact/ui/card';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+import Link from 'next/link';
+
+export default function WithFormDemo() {
+    return (
+        <Card.Root className="max-w-sm mx-auto">
+            <Card.Body className="space-y-4">
+                <Card.Caption>
+                    <Card.Title>Welcome back</Card.Title>
+                    <Card.Subtitle>Sign in with your email to continue.</Card.Subtitle>
+                </Card.Caption>
+                <Card.Content>
+                    <form className="space-y-6">
+                        <div className="flex flex-col gap-2">
+                            <Label htmlFor="email">Email</Label>
+                            <InputText id="email" type="email" />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                            <div className="flex items-center justify-between">
+                                <Label htmlFor="password" className="flex-1">
+                                    Password
+                                </Label>
+                                <Button as={Link} href="/forgot-password" variant="link" className="p-0">
+                                    Forgot password?
+                                </Button>
+                            </div>
+                            <InputText id="password" type="password" />
+                        </div>
+                    </form>
+                </Card.Content>
+                <Card.Footer className="flex flex-col gap-4">
+                    <Button>Login</Button>
+                    <Button severity="secondary" variant="outlined">
+                        Login with Google
+                    </Button>
+                    <div className="mt-2 text-center text-surface-500 text-sm">
+                        Don’t have an account?{' '}
+                        <Button as={Link} href="/signup" variant="link" className="p-0">
+                            Sign up
+                        </Button>
+                    </div>
+                </Card.Footer>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+```
+
+### Advanced
+
+Use `Card.Header` to place an image, avatar or other content in the header.
+
+```tsx
+import { Globe, MapMarker, Phone } from '@primeicons/react';
+import { StarFill } from '@primeicons/react/star-fill';
+import { Avatar } from '@primereact/ui/avatar';
+import { Button } from '@primereact/ui/button';
+import { Card } from '@primereact/ui/card';
+import { Tag } from '@primereact/ui/tag';
+
+export default function AdvancedDemo() {
+    return (
+        <Card.Root className="max-w-sm mx-auto overflow-hidden">
+            <Card.Header className="relative">
+                <img
+                    className="w-full max-h-42 object-cover"
+                    alt="user header"
+                    src="https://images.unsplash.com/photo-1513649718256-1a7162666bad?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                />
+                <Avatar.Root shape="circle" className="size-24! border-3 border-surface-0 dark:border-surface-900 absolute -bottom-12! left-4!">
+                    <Avatar.Image src="https://images.unsplash.com/photo-1722495178488-c8056c4ec2c0?q=80&w=2081&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+                </Avatar.Root>
+            </Card.Header>
+            <Card.Body className="pt-16!">
+                <Card.Caption>
+                    <Card.Title className="font-bold! text-xl!">Sakura Fresh Market</Card.Title>
+                    <div className="flex items-center gap-2">
+                        <Tag className="w-fit" severity="info">
+                            Daily
+                        </Tag>
+                        <Tag className="w-fit" severity="info">
+                            Premium
+                        </Tag>
+                    </div>
+                </Card.Caption>
+                <Card.Content className="space-y-4">
+                    <p>Sakura Fresh Market is your go-to store for fresh local produce, Japanese snacks, and daily essentials — all in one place!</p>
+                    <div className="flex items-center gap-2">
+                        <StarFill className="text-yellow-500"></StarFill>
+                        <span>
+                            <b>4.6</b> (200+ reviews)
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <MapMarker />
+                        <span>Tokyo, Shibuya-ku</span>
+                    </div>
+                </Card.Content>
+                <Card.Footer className="flex items-center gap-2 mt-4">
+                    <Button className="flex-1" severity="secondary" variant="outlined">
+                        <Phone />
+                        Call Us
+                    </Button>
+                    <Button className="flex-1">
+                        <Globe />
+                        Visit Site
+                    </Button>
+                </Card.Footer>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/card#api) for `CardRoot`, `CardHeader`, `CardBody`, `CardCaption`, `CardTitle`, `CardSubtitle`, `CardContent`, and `CardFooter` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/card#api) for `useCard` hook documentation.
+
+### Accessibility
+
+See [Card Primitive](/docs/primitive/components/card#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Card" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Card" category="token" />

package/data/llms/styled/components/carousel.md

@@ -0,0 +1,388 @@
+# Carousel
+
+Carousel is a content slider featuring various customization options.
+
+```tsx
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Button } from '@primereact/ui/button';
+import { Carousel } from '@primereact/ui/carousel';
+
+const albums = [
+    {
+        title: 'Velvet Haze',
+        artist: 'Aurora Skies',
+        img: 'https://plus.unsplash.com/premium_photo-1721310985165-4e6e63d5e7a1?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Dissolve',
+        artist: 'Phantom Echo',
+        img: 'https://images.unsplash.com/photo-1711054824441-064a99073a0b?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Still Life',
+        artist: 'Glass Animals',
+        img: 'https://images.unsplash.com/photo-1651443039959-582bbea6be6a?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Bloom',
+        artist: 'Petal Storm',
+        img: 'https://plus.unsplash.com/premium_photo-1748180936767-e1ce9b2374fa?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Refraction',
+        artist: 'Prism Collective',
+        img: 'https://images.unsplash.com/photo-1651443146979-4cf9a27dcade?w=200&h=200&fit=crop&auto=format'
+    },
+    { title: 'Ivory', artist: 'Soft Landing', img: 'https://images.unsplash.com/photo-1531777992189-ad52457fbe93?w=200&h=200&fit=crop&auto=format' }
+];
+
+function Preview() {
+    return (
+        <Carousel.Root className="max-w-sm mx-auto" slidesPerPage={2.45} spacing={20}>
+            <div className="flex items-center justify-between mb-4">
+                <div className="font-bold ">Last Played</div>
+                <div className="flex items-center gap-2">
+                    <Carousel.Prev as={Button} size="small" severity="secondary" iconOnly>
+                        <ChevronLeft />
+                    </Carousel.Prev>
+                    <Carousel.Next as={Button} size="small" severity="secondary" iconOnly>
+                        <ChevronRight />
+                    </Carousel.Next>
+                </div>
+            </div>
+            <Carousel.Content>
+                {albums.map((album) => (
+                    <Carousel.Item key={album.title} className="w-full relative">
+                        <div className="relative">
+                            <img draggable={false} src={album.img} alt={album.title} className="rounded-xl object-cover w-full aspect-square" />
+                        </div>
+                        <div className="mt-2">
+                            <div className="font-semibold">{album.title}</div>
+                            <div className="text-sm text-muted-color">{album.artist}</div>
+                        </div>
+                    </Carousel.Item>
+                ))}
+            </Carousel.Content>
+        </Carousel.Root>
+    );
+}
+
+export default Preview;
+```
+
+## Usage
+
+```tsx
+import { Carousel } from '@primereact/ui/carousel';
+```
+
+```tsx
+<Carousel.Root>
+    <Carousel.Content>
+        <Carousel.Item></Carousel.Item>
+    </Carousel.Content>
+    <Carousel.Indicators />
+    <Carousel.Prev></Carousel.Prev>
+    <Carousel.Next></Carousel.Next>
+</Carousel.Root>
+```
+
+## Examples
+
+### Basic
+
+Cycles through a set of items with navigation controls.
+
+```tsx
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Carousel } from '@primereact/ui/carousel';
+
+function BasicDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel.Root className="max-w-xl mx-auto" align="center">
+                <Carousel.Content className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Carousel.Item key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <div className="flex mt-4 gap-4">
+                    <Carousel.Indicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <Carousel.Prev className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronLeft className="text-lg"></ChevronLeft>
+                        </Carousel.Prev>
+                        <Carousel.Next className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronRight className="text-lg"></ChevronRight>
+                        </Carousel.Next>
+                    </div>
+                </div>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default BasicDemo;
+```
+
+### Alignment
+
+Use the `align` property to align the carousel items. `slidesPerPage` property is used to control the number of slides visible per page.
+
+```tsx
+import { Carousel } from '@primereact/ui/carousel';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+
+function AlignmentDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel.Root className="max-w-xl mx-auto" align="start" slidesPerPage={1.5}>
+                <Carousel.Content className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Carousel.Item key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <div className="flex mt-4 gap-4">
+                    <Carousel.Indicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <Carousel.Prev className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronLeft className="text-lg"></ChevronLeft>
+                        </Carousel.Prev>
+                        <Carousel.Next className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronRight className="text-lg"></ChevronRight>
+                        </Carousel.Next>
+                    </div>
+                </div>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default AlignmentDemo;
+```
+
+### Orientation
+
+Use the `orientation` property to change the orientation of the carousel.
+
+```tsx
+import { Carousel } from '@primereact/ui/carousel';
+import { ChevronDown } from '@primeicons/react/chevron-down';
+import { ChevronUp } from '@primeicons/react/chevron-up';
+
+function SizeDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel.Root className="max-w-sm mx-auto flex flex-col gap-8 items-center" orientation="vertical" slidesPerPage={1.3}>
+                <Carousel.Prev className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                    <ChevronUp className="text-lg"></ChevronUp>
+                </Carousel.Prev>
+                <Carousel.Content className="h-[240px] w-full">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Carousel.Item key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <Carousel.Next className="w-10 h-10 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                    <ChevronDown className="text-lg"></ChevronDown>
+                </Carousel.Next>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default SizeDemo;
+```
+
+### Loop
+
+Use the `loop` property to enable loop mode.
+
+```tsx
+import { Carousel } from '@primereact/ui/carousel';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+
+function LoopDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel.Root className="max-w-xl mx-auto" align="center" loop slidesPerPage={1.75}>
+                <Carousel.Content className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Carousel.Item key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <div className="flex mt-4 gap-4">
+                    <Carousel.Indicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <Carousel.Prev className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronLeft className="text-lg"></ChevronLeft>
+                        </Carousel.Prev>
+                        <Carousel.Next className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronRight className="text-lg"></ChevronRight>
+                        </Carousel.Next>
+                    </div>
+                </div>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default LoopDemo;
+```
+
+### Variable Size
+
+Use the `autoSize` property to enable auto size mode and set the width of the carousel items.
+
+```tsx
+import { Carousel } from '@primereact/ui/carousel';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+
+const items = ['120px', '80px', '200px', '160px', '220px', '180px', '280px', '100px'];
+
+function VariableSizeDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel.Root className="max-w-xl mx-auto" align="center" autoSize>
+                <Carousel.Content className="h-[140px]">
+                    {items.map((width, i) => (
+                        <Carousel.Item key={i} style={{ width }}>
+                            <div className="h-full text-4xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-lg border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </Carousel.Item>
+                    ))}
+                </Carousel.Content>
+                <div className="flex mt-4 gap-4">
+                    <Carousel.Indicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <Carousel.Prev className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronLeft className="text-lg"></ChevronLeft>
+                        </Carousel.Prev>
+                        <Carousel.Next className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
+                            <ChevronRight className="text-lg"></ChevronRight>
+                        </Carousel.Next>
+                    </div>
+                </div>
+            </Carousel.Root>
+        </div>
+    );
+}
+
+export default VariableSizeDemo;
+```
+
+### Gallery
+
+Gallery demo shows how to use the `slide` property to scroll to a specific slide by index.
+
+```tsx
+'use client';
+import { Carousel, type CarouselRootChangeEvent } from '@primereact/ui/carousel';
+import * as React from 'react';
+
+const images = [
+    'https://images.unsplash.com/photo-1589656966895-2f33e7653819?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1518717758536-85ae29035b6d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1704905832963-37d6f12654b7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1470130623320-9583a8d06241?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1678841446310-d045487ef299?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1511885663737-eea53f6d6187?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1598439210625-5067c578f3f6?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1638255402906-e838358069ab?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+];
+
+function GalleryDemo() {
+    const [selectedImage, setSelectedImage] = React.useState(0);
+
+    return (
+        <div className="mt-8 mb-16">
+            <div className="max-w-2xl mx-auto">
+                <Carousel.Root
+                    slide={selectedImage}
+                    onSlideChange={(e: CarouselRootChangeEvent) => setSelectedImage(Number(e.value ?? 0))}
+                    align="center"
+                >
+                    <Carousel.Content className="h-[396px]">
+                        {images.map((_, i) => (
+                            <Carousel.Item key={i} className="basis-full! ">
+                                <img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
+                            </Carousel.Item>
+                        ))}
+                    </Carousel.Content>
+                </Carousel.Root>
+                <Carousel.Root className="mt-3" spacing={8} align="center" slide={selectedImage}>
+                    <Carousel.Content className="h-[90px]">
+                        {images.map((_, i) => (
+                            <Carousel.Item
+                                key={i}
+                                onClick={() => setSelectedImage(i)}
+                                className={`cursor-pointer basis-1/4! transition-opacity ${selectedImage === i ? '' : 'opacity-60 hover:opacity-40'}`}
+                            >
+                                <img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
+                            </Carousel.Item>
+                        ))}
+                    </Carousel.Content>
+                </Carousel.Root>
+            </div>
+        </div>
+    );
+}
+
+export default GalleryDemo;
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/carousel#api) for `CarouselRoot`, `CarouselContent`, `CarouselItem`, `CarouselPrev`, `CarouselNext`, `CarouselIndicators`, `CarouselIndicator` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/carousel#api) for `useCarousel` hook documentation.
+
+### Accessibility
+
+See [Carousel Primitive](/docs/primitive/components/carousel#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Carousel" category="style" />
+<DocTable name="CarouselContent" category="style" />
+<DocTable name="CarouselIndicators" category="style" />
+<DocTable name="CarouselIndicator" category="style" />
+<DocTable name="CarouselNext" category="style" />
+<DocTable name="CarouselPrev" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Carousel" category="token" />