Getting started

Cheatsheet · your first deck in 5 components

The five elements you actually need for a 10-minute talk. Copy, paste, ship. Read the full Component library page later, when you know what to look for.

Rikiki has 36 components but you do not need them on day one. Pick these five, give your talk, come back later for the rest. Each example below is self-contained · drop it inside <deck-root> in the order that fits your story.

1 · Cover

The opening slide. Title, optional sub-title, optional brand + speaker. It comes first.

cover
<deck-cover brand="my-talk · 2026" speaker="Jane">
  <h1>Hello, <span class="accent">world</span>.</h1>
  <p class="sub">A 12-min talk about the thing.</p>
</deck-cover>
Live preview · slide canvas

2 · Section

Use this every time you want a chapter break. With nav="2d" on<deck-root> it also tells the framework where the 2D navigation columns are · ←/→ jumps from one<deck-section> to the next, ↑/↓ walks the slides inside. Without it, arrows stay linear.

section
<deck-section num="02">
  <h1>Why this matters</h1>
</deck-section>
Live preview · slide canvas

3 · Hero with code

The workhorse · a title, a one-line lead, then one focal block (code, diagram, big number). Most body slides take this shape.

hero
<deck-feature eyebrow="Module">
  <h1 slot="title">The whole point</h1>
  <p slot="lead" class="lead">One sentence that frames the slide.</p>
  <deck-code lang="ts" hero>
    const greet = (name: string) => `Hello, ${name}`;
  </deck-code>
</deck-feature>
Live preview · slide canvas

4 · Split for comparison

Two columns · before / after, problem / fix, A / B. Pass cols="1-1"for equal columns or "1-2" for an asymmetric split.

split
<deck-split cols="1-1">
  <h1 slot="title">Two takes</h1>
  <deck-card slot="left" color="red">
    <h3>Before</h3>
    <p>Bundler explodes.</p>
  </deck-card>
  <deck-card slot="right" color="green">
    <h3>After</h3>
    <p>Ship plain HTML.</p>
  </deck-card>
</deck-split>
Live preview · slide canvas

5 · Hook for the punch line

Close on a dark slide with one big sentence the audience leaves with. Use it once or twice per deck · it loses weight when it is everywhere.

hook
<deck-takeaway kicker="Take-home">
  <deck-punch size="display">Source = output.</deck-punch>
  <p class="caption on-dark">A deck is a folder.</p>
</deck-takeaway>
Live preview · slide canvas

Putting it together

That is a complete deck. Save it as index.html, serve the folder as in Getting started, give the talk. Speaker notes go in a <deck-notes> inside a slide; pressing P opens a second window that shows them next to the current and next slide.

my-talk/index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="rikiki/themes/rikiki.css">
  <script type="module" src="rikiki/dist/index.js"></script>
</head>
<body>
  <deck-root>
    <deck-cover brand="my-talk · 2026" speaker="Jane">
  <h1>Hello, <span class="accent">world</span>.</h1>
  <p class="sub">A 12-min talk about the thing.</p>
</deck-cover>
    <deck-section num="02">
  <h1>Why this matters</h1>
</deck-section>
    <deck-feature eyebrow="Module">
  <h1 slot="title">The whole point</h1>
  <p slot="lead" class="lead">One sentence that frames the slide.</p>
  <deck-code lang="ts" hero>
    const greet = (name: string) => `Hello, ${name}`;
  </deck-code>
</deck-feature>
    <deck-split cols="1-1">
  <h1 slot="title">Two takes</h1>
  <deck-card slot="left" color="red">
    <h3>Before</h3>
    <p>Bundler explodes.</p>
  </deck-card>
  <deck-card slot="right" color="green">
    <h3>After</h3>
    <p>Ship plain HTML.</p>
  </deck-card>
</deck-split>
    <deck-takeaway kicker="Take-home">
  <deck-punch size="display">Source = output.</deck-punch>
  <p class="caption on-dark">A deck is a folder.</p>
</deck-takeaway>
  </deck-root>
</body>
</html>
Live preview · slide canvas

Next

When you outgrow these five: