# Rikiki > Rikiki is a tiny (~14 KB gzip) Lit Web Components framework for technical > presentations and product carousels. A deck is a folder · write plain HTML, > open `index.html` in a browser. No build step, no `node_modules` to > resurrect five years from now. Full machine-readable reference (every component, attribute, slot, token and pattern, in one file): /rikiki/docs/llms/rikiki-reference.md The framework is opinionated: - Web standards only (Custom Elements, Shadow DOM, ES Modules, CSS Custom Properties). - Zero-build for deck authors. Consumers never touch a bundler. - ~140 design tokens, BEM-named, two layers (palette · semantic). - Plugins are opt-in and lazy-loaded (transitions, presenter window, Shiki, …). - The same `` engine drives slides AND swipe-able carousels via `autoplay` / `loop` / `swipe` attributes. ## Quickstart ```html

Hello, world.

That's all you need.

``` ## Docs - [Overview](https://rikiki.tordu-jardin.fr/docs/): the doc landing - [Cheatsheet · your first deck in 5 components](https://rikiki.tordu-jardin.fr/docs/cheatsheet): cover · section · hero · split · hook - [Install · Quickstart](https://rikiki.tordu-jardin.fr/docs/getting-started): CDN · npm · git clone - [Lit, Shadow DOM, override patterns](https://rikiki.tordu-jardin.fr/docs/lit-and-shadow-dom): the only 3 ways to retheme - [Anatomy of a slide](https://rikiki.tordu-jardin.fr/docs/anatomy): layouts / slots / atoms - [Component library](https://rikiki.tordu-jardin.fr/docs/components): every `` element, attrs, slots, tokens, live preview - [Navigation & overview](https://rikiki.tordu-jardin.fr/docs/navigation): 2D nav, key bindings, overview mode - [Theming · design tokens](https://rikiki.tordu-jardin.fr/docs/theming): two layers, BEM naming, write a third theme - [Recipes](https://rikiki.tordu-jardin.fr/docs/recipes): common slide patterns - [Plugins](https://rikiki.tordu-jardin.fr/docs/plugins): transitions, presenter, Shiki, notes - [`` API](https://rikiki.tordu-jardin.fr/docs/api): properties, key bindings, carousel mode ## Reference · core component `` is the navigation host. Its public attributes: | Attribute | Type | What it controls | | -------------- | ------- | ------------------------------------------------------------------ | | `transition` | string | Lazy-loads the transition plugin. `slide` · `slide-up` · `slide-down` · `slide-right` · `fade` · `zoom` · `flip`. Auto-directional for `slide`/`slide-up`. | | `autoplay` | number | Auto-advance interval in ms. `0` disables. Pauses on hover, resets on user key press. | | `loop` | boolean | Wrap around at the deck edges (carousel mode). | | `swipe` | boolean | Pointer-driven horizontal swipe nav. 60 px threshold. | | `overview` | boolean | Toggle the overview mode (lazy-loads `deck-overview.js`). | Built-in key bindings: | Key | Behavior | | ---------------------- | ----------------------------------------------------- | | `←` `→` | Section nav · linear fallback at edges | | `↑` `↓` | Sub-slide nav · linear fallback at section boundaries | | `Space` · `PgDn` | Linear next | | `PgUp` | Linear previous | | `Home` · `End` | First / last slide | | `O` | Toggle overview (lazy-loads `deck-overview.js`) | | `P` | Toggle presenter window (lazy-loads `deck-presenter.js`) | | `?` · `H` | Open help (lazy-loads `deck-help.js`) | | `B` · `.` | Black screen (clicker compat · PowerPoint convention) | | `W` · `,` | White screen (clicker compat) | | `Esc` | Close any overlay / blank screen | ## Reference · components Rikiki ships 7 layouts and 18 atoms. All are custom elements with shadow DOM, opinionated defaults, and `--deck--*` CSS custom properties for retheming. Layouts: `` · `` · `` · `` · `` · `` · `` Atoms: `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` · `` See the [component library page](https://rikiki.tordu-jardin.fr/docs/components) for each element's attributes, slots, customization tokens, and a live preview. ## Reference · plugins (opt-in, lazy) | Plugin | Size | Activation | Purpose | | ----------------- | ---------- | ----------------------------------- | ----------------------------------------------------------- | | `deck-transition` | ~1.7 KB gz | `transition="..."` on `deck-root` | Slide/fade/zoom/flip animations. Auto-directional, no flash. | | `deck-presenter` | ~2.9 KB gz | Press `P` | Popup window · current + next slide + speaker notes + timer. | | `shiki-plugin` | ~0.6 KB gz + Shiki CDN | `await installShiki({ theme, langs })` | Production-grade highlighting for `deck-code`. | | `deck-notes` | ~0.4 KB · in core | `...` slot | Speaker notes (read by `deck-presenter`). | Costs are paid only when used. A deck without `transition` never fetches `deck-transition.js`. A deck without `installShiki()` never loads Shiki. ## Reference · design tokens Two layers · `--rik-*` prefix, BEM (`__element`, `--modifier`). - **Palette (private)**: `--rik-palette-{mango,helico,ember,warm,orchid,lime,canary,paper,ink,night}-{50..900}`. Don't consume directly. - **Semantic (public)**: surfaces, text, borders, accent, status (success / danger / warn / info), interactive, focus, link, selection, decorative, elevation, motion, z-index, typography (`--rik-text-{2xs..4xl}` modular scale 1.25), spacing, radius, icon sizes, slide chrome, code surface. Override one component instance with `--deck--*` tokens inline. Override the whole deck by setting `--rik-*` on `:root` in a stylesheet loaded after the theme link. See the [theming page](https://rikiki.tordu-jardin.fr/docs/theming) for the full token list. ## Source The framework is MIT-licensed. The repository will hold the source, the example deck (`examples/rikiki-tour/`), and the docs site.