Slide Image

Overview

Use this component to add any form of media to your slides. You can specify if you want the image to fill the parent container, or if you want to show the image in a certain aspect ratio.

Installation

pnpm dlx shadcn@latest add https://slide-cn.com/r/slide-image.json

npx shadcn@latest add https://slide-cn.com/r/slide-image.json

yarn dlx shadcn@latest add https://slide-cn.com/r/slide-image.json

bunx --bun shadcn@latest add https://slide-cn.com/r/slide-image.json

Demo

Display media with optional captions

Modern presentation visuals

Usage

<SlideImage className="my-auto">
	<SlideImage.Image
		src="/spinning-cat.gif"
		alt="oiia cat"
		aspectRatio={1}
		objectFit="contain"
	/>
	<SlideImage.Caption>Spinning cat</SlideImage.Caption>
</SlideImage>

Reference

Image

Use this component to add an image to your slide. This wraps Aspect Ratio from shadcn as well as Image from NextJs.

Caption

You can use this component to add a caption to your media.