Slides
A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress.
Deck
<div class="mn-deck" style="border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden">
<div class="mn-deck-progress"></div>
<div class="mn-slides" tabindex="0" aria-label="Ledger, Series A" style="--h:22rem">
<section class="mn-slide mn-slide-center"><p class="mn-eyebrow">Series A · 2026</p><h3 class="mn-title">Close the books in four days.</h3><p class="mn-intro">Ledger, for finance teams of 5 to 500.</p></section>
<section class="mn-slide"><p class="mn-eyebrow">The problem</p><h3 class="mn-title">Month-end takes 14 days. 10 of them are data entry.</h3></section>
<section class="mn-slide"><dl class="mn-figures" style="--cols:3"><div><dt>Customers</dt><dd>1,400</dd></div><div><dt>ARR</dt><dd>€8.2 M</dd></div><div><dt>Net retention</dt><dd>131%</dd></div></dl></section>
</div>
<div class="mn-deck-bar"><span data-mn-slide-count>1 / 3</span><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" type="button" data-mn-slide="prev" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" type="button" data-mn-slide="next" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/slides.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-deck | The wrapper for the slides, the bar and the progress line. |
| mn-slides | The scrolling deck (focusable, with an aria-label). --h sets its height (default 100dvh). |
| mn-slide | A slide; mn-slide-center centres it. |
| mn-deck-bar | Counter ([data-mn-slide-count]) and prev/next buttons (data-mn-slide="prev|next"). |
| mn-deck-progress | A thin progress line at the top. |
Accessibility
- The deck is focusable with an aria-label; arrow keys, Page Up/Down, Space, Home and End move between slides.
- Each slide gets aria-roledescription="slide" and a “3 of 8” label; the counter is visible text.
- Scroll snapping stays usable with a mouse wheel, touch and assistive tech: nothing is hidden.