Showcase | Presentation

The engine showcase: every layout, every directive and a full configuration (colors, radius, heading font, three-zone footer with logo, custom CSS and the Metric component).

IntermediateEvery layoutrecit.config.tsFooter & logoCustom componentTabbed codeKaTeXSteps

pnpm --filter recit-example-deck-showcase dev

▶ Open the demoexamples/deck-showcase/slides.md

The demo

Click the deck, then use ← → · 13 slides · 01:02Open fullscreen →

Try it

Change theme.colors.primary in recit.config.ts: the whole deck follows.
Set footer.hideOn to [] to show the footer on the cover.
Add :::component{name=Metric value="42" label="Lorem"} to a slide.

Source code

---
title: Showcase
aspectRatio: 16:9
description: "Every layout and directive, a full recit.config and a custom component."
lang: en
---

--- layout=cover

# Récit
### Lorem ipsum dolor sit amet, consectetur adipiscing elit

:badge[v0.1]{type=primary} :badge[Markdown & MDX]{type=success}

:::notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
:::

--- layout=section

# 1. Layouts

--- layout=grid cols=3

# Card grid

:::card
### ⚡ Lorem
Ipsum dolor sit amet, consectetur adipiscing elit.
:::

:::card
### 🎨 Ipsum
Sed do eiusmod tempor incididunt ut `labore`.
:::

:::card
### ♿ Dolor
Ut enim ad minim veniam, quis nostrud.
:::

--- layout=split ratio=1:1

# Image left, image right

:::left
::image{src=./photo.svg alt="Purple gradient" fit=cover}
:::

:::right
::image{src=./logo.svg alt="Lorem logo" fit=contain}
:::

--- layout=image-right image=./photo.svg alt="Abstract purple illustration"

# Full-height image

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- `layout=image-left` sed do eiusmod

--- layout=image image=./photo.svg overlay=0.35

# Full-bleed background

Lorem ipsum dolor sit amet (`overlay=0.35`).

--- layout=columns ratio=2:1

# Free columns

:::col
### Lorem ipsum
Dolor sit amet `:::col`, `:::left` et `:::right` consectetur `ratio=2:1`.
:::

:::col
:::callout{type=tip title="Tip"}
Sed do eiusmod tempor incididunt ut labore.
:::
:::

--- layout=section

# 2. Content

---

# Tabbed code

:::code-group
```ts title="config.ts"
export default defineConfig({
  theme: { colors: { primary: "#7c3aed" } },
})
```

```bash title="Terminal"
recit dev slides.md
```
:::

--- layout=center

# Math & diagrams

$$
E = mc^2 \qquad \int_0^1 x^2\,dx = \frac{1}{3}
$$

```mermaid title="Lorem ipsum pipeline"
graph LR
  A[Lorem] --> B[Ipsum]
  B --> C[Dolor]
  C --> D[Amet]
```

---

# Progressive steps

:::step
1. Lorem ipsum dolor sit amet
:::

:::step
2. Consectetur adipiscing elit
:::

:::step
3. Sed do eiusmod tempor (→ to advance)
:::

--- layout=grid cols=3

# Custom components

:::component{name=Metric value="98 %" label="Lorem ipsum" trend="+2 pts"}
:::

:::component{name=Metric value="120 ms" label="Dolor sit"}
:::

:::component{name=Metric value="0" label="Amet consectetur"}
:::

--- layout=center

> "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
> — Marcus Tullius

Press :kbd[T] to switch theme and :kbd[S] for the presenter console.

Configuration

import { defineConfig } from "@recit/core";

export default defineConfig({
  metadata: {
    title: "Showcase",
    author: "Lorem Ipsum Team",
    lang: "en",
  },
  theme: {
    colors: { primary: "#7c3aed", accent: "#2563eb" },
    dark: { primary: "#a78bfa" },
    radius: "24px",
    fonts: { heading: "Georgia, serif" },
    defaultMode: "dark",
    customCss: "./styles.css",
  },
  footer: {
    left: "{title}",
    center: "{author}",
    right: "{slide} / {total}",
    logo: "./logo.svg",
    hideOn: ["cover", "image"],
  },
  components: "./components/index.tsx",
  rules: { maxBulletPoints: 6 },
  // Multilingual: slides.fr.md is the French variant of slides.md
  // (`recit build slides.md --locale fr`, `recit i18n check`)
  i18n: { locales: ["en", "fr"] },
});