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 23 components but you don't 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. Always 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>

2 · Section

Use this every time you want a chapter break. It also tells the framework where the 2D navigation columns are · ←/→ jumps from one <deck-section> to the next, ↑/↓ walks the slides inside.

section
<deck-section num="02">
  <h1>Why this matters</h1>
</deck-section>

3 · Hero with code

The workhorse · a title, a one-line lead, then one focal block (code, diagram, big number). 80 % of your slides will look like this.

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>

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>

5 · Hook for the punch line

Close on a dark slide with one big sentence the audience leaves with. Don't use this more than once or twice per deck · it loses weight if it's 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>

Putting it together

That's a complete deck. Drop it in a file, open it, give the talk.

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>

When you outgrow these five