Components
Before vs After
Before
Manual process
No automation
After
Automated flow
Real-time sync
Installation
$ pnpm dlx shadcn@latest add @slidecn/comparison-slide
Usage
import ComparisonSlide from "@/components/slides/comparison-slide";
function MyPresentation() {
return (
<Deck>
<ComparisonSlide
title="Framework Comparison"
variant="table"
left={{
label: "Framework A",
items: ["Feature X", "Feature Y", "Feature Z"],
}}
right={{
label: "Framework B",
items: ["Feature X", "Feature Y"],
color: "red",
}}
/>
</Deck>
);
}API Reference
ComparisonSlide
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Slide heading |
left | ComparisonColumn | required | Left column data |
right | ComparisonColumn | required | Right column data |
variant | "columns" | "table" | "columns" | Display variant |
notes | string | - | Speaker notes |
ComparisonColumn
| Field | Type | Description |
|---|---|---|
label | string | Column header |
items | string[] | List entries |
color | "default" | "green" | "red" | Header color |