Slide
The main component for a slide
Overview
This is the main Slide component. Use this as the root component for each of your slides. You can add a background to your slide by passing a component to the background prop. You can also add a footer to your slide by passing a component to the footer prop. See SlideFooter for more information.
Installation
pnpm dlx shadcn@latest add @slide-cn/slidenpx shadcn@latest add @slide-cn/slideyarn dlx shadcn@latest add @slide-cn/slidebunx --bun shadcn@latest add @slide-cn/slideDemo
A slide component
Welcome to Slide-CN
Create beautiful presentations using code
Internal architecture review - Jan 2026
Use arrow keys to navigate
←→
Usage
export function FirstSlide() {
return (
<Deck>
<Slide>
<TitleSlide className="h-96 rounded-lg">
<TitleSlide.Heading>Welcome to Slide-CN</TitleSlide.Heading>
<TitleSlide.SubHeading>Create beautiful presentations using code</TitleSlide.SubHeading>
<TitleSlide.Meta>Internal architecture review - Jan 2026</TitleSlide.Meta>
</TitleSlide>
</Slide>
</Deck>
);
}With Background
A slide component with a custom background
Welcome to Slide-CN
Create beautiful presentations using code
Internal architecture review - Jan 2026
Use arrow keys to navigate
←→
export function FirstSlide() {
return (
<Deck>
<Slide background={<PixelSnow/>}>
<TitleSlide>
<TitleSlide.Heading>Welcome to Slide-CN</TitleSlide.Heading>
<TitleSlide.SubHeading>Create beautiful presentations using code</TitleSlide.SubHeading>
<TitleSlide.Meta>Internal architecture review - Jan 2026</TitleSlide.Meta>
</TitleSlide>
</Slide>
</Deck>
);
}This is an easy way to add a background to your slide. Any react component can be used as a background.
For this example I used the PixelSnow component from ReactBits.
Reference
Prop
Type