Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
Default image
Use this example to show the a responsive image that won’t grow beyond the maximum original width.
Image caption
This example can be used to add a caption for the image often used inside articles.Warning: the caption is using @html.

Rounded corners
Apply rounded corners to the image by using the specific utility classes from Tailwind CSS.Border radius
Use this example to apply rounded corners to the image by using the rounded-size class where the size can be anything from small to extra large.
Full circle
Use this example to mask the image inside a circle using the rounded-full utility class from Tailwind CSS.
Image shadow
This example can be used to show a shadow effect for the image using the shadow-size utility class.
Retina-ready
Use the srcset attribute to set Retina-ready images with double resolution.Image card
Use this example to make the image a card item with a link and a short text description.
Image effects
Use image effects such as grayscale or blur to change the appearances of the image when being hovered.Grayscale
Use the filter option and apply a grayscale to the image element using the grayscale class.
Blur
Apply a blur by using the blur-size utility class from Tailwind CSS to an image component.
Alignment
Align the image component to the left, center or right side of the document page using margin styles.Left
By default, the image component will be aligned to the left side of the page.
Center
Horizontally align the image to the center of the page using the `mx-auto` class.
Right
Use the `ms-auto` class to align the image to the right side of the page.
Sizes
Set the size of the image using the w-size and h-size or max-w-size utility classes from Tailwind CSS to set the width and height of the element.Small
Use the `max-w-xs` class to set a small size of the image.
Medium
Use the `max-w-md` class to set a medium size of the image.
Large
Use the max-w-xl class to set a large size of the image.
Full width
Use the max-w-full class to set the full width of the image as long as it doesn’t become larger than the original source.