diff --git a/src/docs/pages/CarouselPage.tsx b/src/docs/pages/CarouselPage.tsx
index a50007e43..d5fe3a50a 100644
--- a/src/docs/pages/CarouselPage.tsx
+++ b/src/docs/pages/CarouselPage.tsx
@@ -8,55 +8,63 @@ const CarouselPage: FC = () => {
     {
       title: 'Default carousel',
       code: (
-        <Carousel>
-          <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
-        </Carousel>
+        <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+          <Carousel>
+            <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
+          </Carousel>
+        </div>
       ),
     },
     {
       title: 'Sliding interval',
       code: (
-        <Carousel slideInterval={5000}>
-          <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
-        </Carousel>
+        <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+          <Carousel slideInterval={5000}>
+            <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
+          </Carousel>
+        </div>
       ),
     },
     {
       title: 'Static carousel',
       code: (
-        <Carousel slide={false}>
-          <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
-        </Carousel>
+        <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+          <Carousel slide={false}>
+            <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
+          </Carousel>
+        </div>
       ),
     },
     {
       title: 'Custom Controls',
       code: (
-        <Carousel leftControl="left" rightControl="right">
-          <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
-          <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
-        </Carousel>
+        <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+          <Carousel leftControl="left" rightControl="right">
+            <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
+            <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
+          </Carousel>
+        </div>
       ),
     },
     {
       title: 'Indicators',
       code: (
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid h-56 grid-cols-2 gap-4 sm:h-64 xl:h-80 2xl:h-96">
           <Carousel>
             <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
             <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
@@ -77,17 +85,19 @@ const CarouselPage: FC = () => {
     {
       title: 'Slide as anything',
       code: (
-        <Carousel>
-          <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
-            Slide 1
-          </div>
-          <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
-            Slide 2
-          </div>
-          <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
-            Slide 3
-          </div>
-        </Carousel>
+        <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+          <Carousel>
+            <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
+              Slide 1
+            </div>
+            <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
+              Slide 2
+            </div>
+            <div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
+              Slide 3
+            </div>
+          </Carousel>
+        </div>
       ),
     },
   ];
diff --git a/src/lib/components/Carousel/Carousel.stories.tsx b/src/lib/components/Carousel/Carousel.stories.tsx
index c2cf59dab..62a306662 100644
--- a/src/lib/components/Carousel/Carousel.stories.tsx
+++ b/src/lib/components/Carousel/Carousel.stories.tsx
@@ -8,13 +8,15 @@ export default {
 } as Meta;
 
 const Template: Story<CarouselProps> = (args) => (
-  <Carousel {...args}>
-    <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
-    <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
-    <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
-    <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
-    <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
-  </Carousel>
+  <div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
+    <Carousel {...args}>
+      <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
+      <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
+      <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
+      <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
+      <img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
+    </Carousel>
+  </div>
 );
 
 export const Default = Template.bind({});
diff --git a/src/lib/components/Carousel/index.tsx b/src/lib/components/Carousel/index.tsx
index afc319841..dd85e1d96 100644
--- a/src/lib/components/Carousel/index.tsx
+++ b/src/lib/components/Carousel/index.tsx
@@ -34,9 +34,9 @@ export const Carousel: FC<CarouselProps> = ({
 
   const items = useMemo(
     () =>
-      Children.map(children as ReactElement<ComponentProps<'img'>>[], (child: ReactElement<ComponentProps<'img'>>) =>
+      Children.map(children as ReactElement[], (child: ReactElement) =>
         cloneElement(child, {
-          className: theme.item.base,
+          className: classNames(theme.item.base, child.props.className),
         }),
       ),
     [children, theme.item.base],
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index 92b7a1a6a..f70c4d99a 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -240,7 +240,7 @@ export default {
     },
   },
   carousel: {
-    base: 'relative h-full w-full h-56 sm:h-64 xl:h-80 2xl:h-96',
+    base: 'relative h-full w-full',
     indicators: {
       active: {
         off: 'bg-white/50 hover:bg-white dark:bg-gray-800/50 dark:hover:bg-gray-800',