Skip to content
Kadal Deck docs

Pro backgrounds and layouts

Kadal Deck Pro and Team include a library of premium backgrounds and layouts: animated and still art, and slide layouts (covers, agendas, timelines, comparisons, quotes, big numbers and more), grouped by genre: 117 items in 15 genres, with new genres added over time. Browse them on the public library page, or in the dashboard under Explore → Backgrounds and Explore → Layouts. Everyone can browse; decks show them on Pro and Team. Backgrounds and Layouts show examples.

Using one

Section titled “Using one”

Every item has a name that starts with pro/. Use it where you would use a built-in one:

---
background: pro/neon-drift
colorScheme: dark
---
# A slide over a Pro background


---
background:
  component: pro/neon-drift
  speed: 2
---
# The same, with a prop


---
layout: pro/folio-split
kicker: Chapter two
---
# A headline


Body text.


::right::


![](/photo.jpg)

Inside a slide, <Background name="pro/neon-drift" speed={0.5} /> works too. Each item’s props and slots are listed in its detail sheet in Explore, with Copy MDX and Use in a draft (which opens a builder draft and puts the item on the slide you choose).

Where they render, honestly

Section titled “Where they render, honestly”

The items are not part of the open-source engine. They are served by our host, and only to decks whose workspace is on Pro or Team:

Where the deck runs What a pro/ name does
Published on decks.kadal.cc, workspace on Pro or Team Renders the item.
Published on decks.kadal.cc, workspace on Free or Starter The slide keeps its theme’s own background and the default layout. Nothing is fetched.
The hosted builder’s preview As published, for your workspace’s plan; on Free and Starter a small chip on the slide says “Pro background — available on Kadal Deck Pro”.
kadal-deck dev on your computer The theme’s own, plus the same chip (the dev server has no access to the library).
A deck you build and host yourself The theme’s own, silently.

So a deck that names pro/ items still works everywhere: it simply looks like its theme wherever the library isn’t available. When a workspace moves to a plan without the library, its decks fall back on their next load (within five minutes).

In print, PDF, PNG and PPTX export, thumbnails and for viewers who ask for reduced motion, an animated item draws its still poster frame instead of moving.

Copy protection

Section titled “Copy protection”

This is best effort and we say so. The item modules are minified with no source maps; each one draws nothing unless the page was told by our host that the library is available; and publishing refuses a file that is byte-for-byte one of the library’s modules from a workspace without the plan (the API answers 402 premium_asset). None of that can stop someone determined from copying code that runs in their own browser. The licence for the library covers using it on Kadal Deck Pro and Team, not extracting it.

For hosts and tinkerers: the remote-pack contract

Section titled “For hosts and tinkerers: the remote-pack contract”

The engine side is open source (@kadal/deck 0.5 and later), so another host could serve its own pro/ library the same way.

The base. The host sets window.__KADAL_DECK__.premium before the deck’s script runs: an http(s) URL (or a same-site path) under which the library sits. Without it the engine never fetches anything for a pro/ name.

The catalog. ${premium}catalog.json is an array of { id: "pro/<name>", kind: "background" | "layout", module: "items/<name>.js", … } (or { items: [...] }). It is fetched once, with credentials, the first time a slide uses a pro/ name. A module path must resolve under the base.

The module. An ES module whose default export is

{
  backgrounds?: Record<string, Component>; // by id
  layouts?: Record<string, Component>;     // by id; receives { frontmatter, options, children }
  poster?: Record<string, Component>;      // still versions, for print, export and reduced motion
  css?: string;                            // added to the page once, as <style data-kadal-premium>
}

A background component gets its props from the slide plus active (true only while its slide is shown). Any failure — no base, a 402/403/404, a network error, a module of the wrong shape — falls back to the theme’s own.

The runtime global. Modules must not bundle React. Before the first import() the engine sets, once and frozen:

window.__KADAL_DECK_RUNTIME__ = {
  contract: 1,
  version: "0.5.0",  // the engine's version
  React,             // the `react` module the deck runs on
  jsx,               // `react/jsx-runtime`: { jsx, jsxs, Fragment }
  components,        // the engine's built-in slide components (Click, Code, Image, …)
  hooks,             // { useDeck, useSlide, useSlideOptional }
};

A module’s build points react and react/jsx-runtime at this global. Within contract: 1 keys are only ever added, never removed or changed.

Send feedback