Presentations are products: a Next.js approach to slide decks

I built our presentation system as a fully featured Next.js site, not a slide deck. At first it was for our own investor pitch, but it quickly became clear this approach works anywhere a company needs to tell its story: pitch decks, sales decks, product demos, internal talks.

The idea is simple: if you build developer-first infrastructure, even your presentations should reflect those same principles. They should be fast, interactive, and carefully designed.

Why traditional decks fall short

Most presentation tools come with hard limits:

Static exports that need constant redistributing
No interactivity to show real product behaviour
Awkward mobile experience
No analytics about what people actually engage with

When your product is built on performance and developer experience, handing someone a static PDF sends the wrong signal.

The vision: empowering sales engineers

The goal is to enable sales engineers to create presentations that feel like our product at Consent: rich, interactive, and polished, without being constrained by static PDFs. Using tools like v0, they can rapidly prototype components and build presentations that showcase real product behaviour, interactive demos, and dynamic content that reflects the quality of our actual platform.

This approach transforms presentations from static documents into living experiences that mirror the sophistication of the product being sold.

Building a modern presentation system

To fix this, I built shadcn-deck, a component-based presentation system that uses the same stack we trust in production:

Framework: Next.js 15
UI: shadcn/ui
Styling: Tailwind CSS v4
State: Zustand
Animations: Framer Motion
Analytics: PostHog + Vercel Analytics

Every slide is a React component, type-safe and reusable. An AspectRatioScaler keeps layouts pixel-perfect on any screen, without juggling breakpoints. A simple sync service keeps presenter mode in lockstep across browser tabs.

The system heavily utilizes slots for flexible component composition and leverages cool experimental Next.js functionality like cacheComponents and partial pre-rendering (PPR) to achieve blazing-fast load times and smooth interactions.

The system supports:

Presenter mode with notes and timers
Grid view for quick navigation
Print view for offline use
Standard view for sharing as a clean URL

Everything is server-side rendered and loads quickly.

Why it matters

The architecture is not just technical showmanship. It is a way of putting our principles into practice:

Performance first: slides load instantly, like our consent API
Developer experience: modular, easy to extend, and cleanly typed
Always up to date: no static PDFs, just a live site that reflects the latest story
Interactive by default: real product components can be embedded directly in the deck

That level of care says something about how we build our actual product.

Lessons learned

Component architecture made adding slides effortless
Real-time sync created a seamless presenter experience
Print styling and hydration required careful work
Performance tuning for animations paid off

Next steps I would love to explore animations and setting up a shadcn registry / component library for slide specific components.

Try it yourself

I have open-sourced the system, it's not perfect, but it works and it's a great way to get started. The demo is live at shadcn-deck.vercel.app and the code is on GitHub at consentdotio/shadcn-deck.

Whether you are pitching, selling, or teaching, this shows how presentations can be treated as products.

I'm speaking at Next.js Conf in SF on October 22nd and would love to meet like-minded people out there while in the Bay. If you're interested in this approach to presentations or just want to chat about developer tooling, let's connect!

Guillermo Rauch, thank you for persuading me to write about this. I should do it more!