Overview

This is the most basic layout for a slide. You can modify/extend these components however you want. By using this component, your slides will look consistent across your presentation.

Installation

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

npx shadcn@latest add https://slide-cn.com/r/header-with-content.json

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

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

Demo

A simple layout with a header and flexible content area

Benefits of Slide-CN

Coding is more consistent than drag and drop
Git allows multiple people to work on your presentation at once
You can vibe code your presentation, and get much better results

Usage

<HeaderWithContent>
	<HeaderWithContent.Header>
		New Slide
	</HeaderWithContent.Header>
	<HeaderWithContent.Content
		className="max-h-100 overflow-y-scroll"
	>
		The benefits of Slide-CN are as follows:
		<ul>
			<li>Coding is more consistant than drag and drop</li>
			<li>Git allows multiple people to work on your presentation at once</li>
			<li>You can vibe code your presentation, and get much better results</li>
		</ul>
	</HeaderWithContent.Content>
</HeaderWithContent>

Reference

Prop

Type

Header with Content