@primereact/mcp 11.0.0 → 11.2.0

package/data/llms/styled/add-ons/uikit/overview.md

@@ -0,0 +1,204 @@
+# UI Kit
+
+PrimeOne is PrimeTek's official Figma UI Kit, designed to match the implementations in the Prime UI Suites.
+
+<img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/primeone-cover-light.jpg" alt="PrimeOne Figma UI Kit" className="w-full rounded-[50px] mb-8!" />
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="flex flex-col gap-20">
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-figma.png" alt="Best Features of Figma" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">UP-TO-DATE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Best Features of Figma</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Auto Layout</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Variants</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Variables and Styles</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Interactive Components</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Boolean, Instance Swap & Text</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Nested Instances</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-system.png" alt="Powerful System" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Powerful System</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Numerous Components</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Icon Library</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Easy Customization</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Atomic Approach</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-themes.png" alt="Two Themes" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">DARK MODE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Two Themes</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's native variable modes.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Aura Light</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Aura Dark</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-tokens.png" alt="Variables Support" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">VARIABLE MANAGEMENT</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Variables Support</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Native Figma Variables unlock a whole new level of flexibility, allowing you to create, manage, and apply design tokens seamlessly—without relying on external plugins.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Countless Variables</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Light and Dark Modes</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Well Documented</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Primitive, Semantic & Component</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-2.png" alt="Figma to Theme Code" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">AUTOMATED</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Figma to Theme Code</div>
+                <p className="text-surface-500 dark:text-surface-400 text-sm italic">This feature requires a <a href="/docs/styled/add-ons/designer/overview">Theme Designer</a> subscription.</p>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Sync design tokens from Figma to theme code with ease. Export token.json to the Visual Editor or generate and sync themes directly to your repository via the Figma plugin.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Automatic Mapping</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Eliminate Handoff</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">CI Pipeline</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Live Preview</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<a href="https://www.figma.com/design/iKOqMjb5gBhqMQ0bZyzD0Y/Preview-%7C-PrimeOne-%7C-4.0.0?node-id=806-36648" target="_blank" rel="noopener noreferrer" className="flex flex-col md:flex-row items-center justify-center gap-8 p-12 mb-8 rounded-[50px] bg-linear-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950 border-2 border-transparent hover:border-primary transition-colors duration-300 no-underline! hover:no-underline!">
+    <div className="flex flex-col items-center md:items-start text-center md:text-left">
+        <span className="text-primary font-semibold text-sm uppercase tracking-wider mb-2">Figma UI Kit</span>
+        <span className="text-surface-900 dark:text-surface-0 text-5xl md:text-6xl font-bold mb-3">Preview</span>
+        <p className="text-surface-600 dark:text-surface-300 text-lg max-w-2xl mb-0!">Explore our complete design system with all components, variants, and interactive elements in Figma</p>
+    </div>
+    <div className="flex items-center justify-center shrink-0">
+        <svg width="80" height="80" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
+            <path d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z" fill="#0acf83" />
+            <path d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z" fill="#a259ff" />
+            <path d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z" fill="#f24e1e" />
+            <path d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z" fill="#ff7262" />
+            <path d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z" fill="#1abcfe" />
+        </svg>
+    </div>
+</a>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-2">Pricing</div>
+    <div className="text-center text-lg text-surface-600 dark:text-surface-300 mb-8">Choose the right plan for your business. <a href="https://www.primefaces.org/uikit/licenses">View License Details</a>.</div>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Single Designer</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For individual designers</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">$249</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">1 Designer</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/uikit" className="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Team</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">$990</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Up to 5 Designers</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/uikit" className="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Enterprise</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For large teams</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">Exclusive Deals</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Custom Team Size</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="mailto:contact@primetek.com.tr" className="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Contact Us</a>
+        </div>
+    </div>
+</div>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-8">Frequently Asked Questions</div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What do I get when I purchase a license?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">You'll be able to download the Figma file of PrimeOne UI Kit.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Is there a recurring fee or is the license perpetual?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">UI Kit license is perpetual so requires one time payment with 1 year free updates, not subscription based.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I use UI Kit license for commercial projects?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I create multiple projects for multiple clients?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What does "Free Updates" mean?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">All updates are completely free for the first year after your purchase. After this period, you keep access to every version released within that first year indefinitely.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I extend my access to updates?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">At PrimeStore, you have the option to purchase an additional update term for another year.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I include UI Kit in an open source project?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I get support?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY">Discord</a> and <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit">Forum</a>.</p>
+        </div>
+    </div>
+</div>

package/data/llms/styled/components/button/api.json

@@ -37,19 +37,19 @@
             },
             {
               "name": "style",
-              "type": "CSSProperties | ((instance?: ButtonInstance) => CSSProperties)",
+              "type": "CSSProperties | ((instance?: ButtonInstance) => undefined | CSSProperties)",
               "default": "",
               "description": "The style to apply to the component."
             },
             {
               "name": "className",
-              "type": "string | ((instance?: ButtonInstance) => string)",
+              "type": "string | ((instance?: ButtonInstance) => undefined | string)",
               "default": "",
               "description": "The class name to apply to the component."
             },
             {
               "name": "as",
-              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "type": "null | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
               "default": "",
               "description": "The component type to render."
             },
@@ -128,31 +128,31 @@
             {
               "name": "plain",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a plain style."
             },
             {
               "name": "rounded",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a rounded style."
             },
             {
               "name": "raised",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a raised style."
             },
             {
               "name": "iconOnly",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a borderless style."
             },
             {
               "name": "fluid",
               "type": "boolean",
-              "default": "",
+              "default": "false",
               "description": "Whether to show the Button with a fluid width."
             },
             {

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

@@ -353,6 +353,71 @@ function GalleryDemo() {
 export default GalleryDemo;
 ```
 
+### Dynamic
+
+Items can be added or removed at runtime. The carousel observes its content and recalculates the snap points, keeping the indicators and navigation in sync.
+
+```tsx
+'use client';
+import { ChevronLeft } from '@primeicons/react/chevron-left';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { Button } from '@primereact/ui/button';
+import { Carousel } from '@primereact/ui/carousel';
+import * as React from 'react';
+
+function DynamicDemo() {
+    const [items, setItems] = React.useState(() => [1, 2, 3]);
+
+    const addItem = () => {
+        setItems((prev) => [...prev, (prev[prev.length - 1] ?? 0) + 1]);
+    };
+
+    const removeItem = () => {
+        setItems((prev) => prev.slice(0, -1));
+    };
+
+    return (
+        <div className="mt-8 mb-16">
+            <div className="flex items-center justify-center gap-2 mb-6">
+                <Button size="small" severity="secondary" onClick={removeItem} disabled={items.length === 0} aria-label="Remove last item">
+                    <Minus />
+                </Button>
+                <span className="w-24 text-center text-sm text-muted-color">{items.length} items</span>
+                <Button size="small" severity="secondary" onClick={addItem} aria-label="Add item">
+                    <Plus />
+                </Button>
+            </div>
+            <Carousel.Root className="max-w-xl mx-auto" align="center" slidesPerPage={2.25} spacing={16}>
+                <Carousel.Content className="h-50">
+                    {items.map((item) => (
+                        <Carousel.Item key={item}>
+                            <div className="h-full text-4xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex items-center justify-center rounded-xl border border-surface">
+                                <span>{item}</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 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.Root>
+        </div>
+    );
+}
+
+export default DynamicDemo;
+```
+
 ## Related
 
 ### Sub-Components