@getnarro/shared-ui

Slide components for Narro presentations — headings, text, lists, code, media, charts, and layouts

getnarro.com · Documentation · Ecosystem

The components a slide is made of: headings and text, lists and quotes, code blocks and diagrams, images, video, embeds, charts, and the column and grid layouts to arrange them in. They have no runtime dependency on @getnarro/core — they are ordinary React components and render anywhere.

Installation

npm install @getnarro/shared-ui react react-dom

Usage

import { Heading, List, Text, TwoColumn } from "@getnarro/shared-ui";
import { Presentation, Slide } from "@getnarro/core";

<Presentation>
  <Slide>
    <TwoColumn>
      <div>
        <Heading level={2}>What worked</Heading>
        <List items={["Shipped the migration", "Cut p99 by half"]} />
      </div>
      <Text>Everything else is next quarter.</Text>
    </TwoColumn>
  </Slide>
</Presentation>;

Components

Every prop of every one of them is at https://getnarro.com/docs/components, read out of the TypeScript source rather than transcribed — so the table describes the version you installed.

Embedding websites and video

Embed takes an ordinary URL and works out the embeddable form: YouTube watch?v= links, Vimeo links, and Google Slides edit links are converted, and anything else is used as-is.

import { Embed } from "@getnarro/shared-ui";

<Embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Video demo" />;

<Embed
  url="https://untrusted-site.example"
  title="Live demo"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
/>;

sandbox restricts what the framed page may do, and loading="lazy" keeps a heavy embed from blocking the first slide. Both are worth setting for anything you do not control.

The Narro ecosystem

| Package | What it is | | --- | --- | | @getnarro/cli | CLI tools for creating and managing Narro presentations | | @getnarro/core | The React runtime for Narro presentations — Presentation, Slide, navigation, transitions, and speaker notes | | @getnarro/docs | Narro's documentation as data — markdown pages, a generated component API reference, and llms.txt | | @getnarro/markdown | Markdown & MDX authoring for Narro presentations | | @getnarro/marketplace | Themes, colour schemes, and templates for Narro presentations | | @getnarro/mcp-server | MCP (Model Context Protocol) server for AI-assisted Narro presentation creation | | @getnarro/shared-ui | Slide components for Narro presentations — headings, text, lists, code, media, charts, and layouts ← you are here | | create-narro | Scaffold a new Narro presentation |

All eight ship from one repository and release together.

The npm package named narro is unrelated to this project. Narro's packages are all under the @getnarro/ scope; the CLI binary narro comes from @getnarro/cli.

Website · Documentation · llms.txt · GitHub · Issues · Changelog

Released under the MIT License.