Component reference

85 components ship across 5 packages. Props below are read out of the type definitions, so they match the installed version exactly.

@getnarro/atlas/react

2 components, imported from @getnarro/atlas/react.

<Atlas>

import { Atlas } from "@getnarro/atlas/react";

A zooming canvas.

Behaviour. Fills its container and clips to it, so it wants a slide of its own. Its children are placed in world units on a plane the camera moves over rather than laid out by the slide — AtlasNode is what places them — and a node the camera cannot see, or that its level-of-detail band excludes, is unmounted rather than merely hidden.

<Atlas path={{ waypoints: [
  { id: "whole", at: { cx: 0, cy: 0, w: 4000 } },
  { id: "ingest", at: "#ingest" },
] }} nodes={nodes}>
  <div data-atlas-id="ingest">…</div>
</Atlas>

<AtlasNode>

import { AtlasNode } from "@getnarro/atlas/react";

A node on the plane. contain: layout paint is not decoration: it stops a node’s own layout from escaping into the camera root, which is what keeps a frame at one style recalculation and zero layout however many nodes are mounted.

Behaviour. Positions itself absolutely at x/y in world units, so it only works inside an Atlas and ignores whatever layout surrounds it. It renders nothing at all while the camera cannot see it, or while its lod band excludes the current framing.

@getnarro/atlas/video

One component, imported from @getnarro/atlas/video.

<AtlasScene>

import { AtlasScene } from "@getnarro/atlas/video";

A zooming canvas as a video scene. tsx <AtlasScene path={path} nodes={nodes}> <AtlasNode id="ingest" x={0} y={0} width={400} height={300}>…</AtlasNode> </AtlasScene>

Behaviour. Fills its container absolutely and owns the whole frame, so it cannot share a scene with ordinary content. Its children are positioned in world units on a plane the camera moves over — AtlasNode is what places them — and anything outside the frame is unmounted rather than merely hidden.

@getnarro/core

27 components, imported from @getnarro/core.

<AnimatePresence>

import { AnimatePresence } from "@getnarro/core";

AnimatePresence enables the animation of components that have been removed from the tree. When adding/removing more than a single child, every child must be given a unique key prop. Any motion components that have an exit property defined will animate out when removed from the tree. jsx import { motion, AnimatePresence } from 'framer-motion' export const Items = ({ items }) => ( <AnimatePresence> {items.map(item => ( <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> ))} </AnimatePresence> ) You can sequence exit animations throughout a tree using variants. If a child contains multiple motion components with exit props, it will only unmount the child once all motion components have finished animating out. Likewise, any components using usePresence all need to call safeToRemove.

<Canvas>

import { Canvas } from "@getnarro/core";

A container for absolutely positioned elements

Behaviour. A positioning context: children are placed absolutely against it, so it only works with CanvasElement/CanvasShape inside. Reach for it when no layout component expresses the arrangement.

<Canvas>
  <CanvasElement x={10} y={20} width={200} height={100}>
    <div>Positioned content</div>
  </CanvasElement>
  <CanvasShape shape="circle" x={50} y={50} size={100} color="#3b82f6" />
</Canvas>

<CanvasElement>

import { CanvasElement } from "@getnarro/core";

A positioned element within a Canvas

Behaviour. Absolutely positioned against the nearest Canvas. x/y are the top-left corner as a percentage or a length, not a centre point, and width/height default to the content’s own size.

<CanvasElement x={10} y={20} width={200} height={100}>
  <div>Positioned at 10%, 20%</div>
</CanvasElement>

// Using pixels:
<CanvasElement x="100px" y="50px" width="200px" height="100px">
  <div>Positioned at 100px, 50px</div>
</CanvasElement>

<CanvasShape>

import { CanvasShape } from "@getnarro/core";

A pre-built shape positioned on the Canvas

Behaviour. Absolutely positioned against the nearest Canvas, and always square — size sets both axes. rotate turns the SVG in place and does not change the box it occupies.

<Canvas>
  <CanvasShape shape="circle" x={50} y={50} size={100} color="#3b82f6" />
  <CanvasShape shape="star" x={200} y={100} size={80} color="#fbbf24" />
  <CanvasShape shape="arrow" x={300} y={50} size={120} color="#10b981" rotate={45} />
</Canvas>

<ErrorBoundary>

import { ErrorBoundary } from "@getnarro/core";

Error Boundary component that catches errors and displays the overlay

<ErrorBoundary onError={(error) => console.error(error)}>
  <Presentation>
    <Slide>...</Slide>
  </Presentation>
</ErrorBoundary>

<ErrorOverlay>

import { ErrorOverlay } from "@getnarro/core";

Error overlay component for development

<ErrorOverlay
  error={{
    message: "Something went wrong",
    stack: "Error: Something went wrong\n  at Component ..."
  }}
  onDismiss={() => setError(null)}
/>

<MarqueeRow>

import { MarqueeRow } from "@getnarro/core";

One scrolling row of a marquee. Usually you want TrustedByMarquee, which arranges several of these.

Behaviour. One scrolling row of a TrustedByMarquee, full width and sized by its content.

<MasonryBackground>

import { MasonryBackground } from "@getnarro/core";

A full-bleed masonry grid of images that crossfades between them. Pauses while its slide is off screen, so an idle deck does no work.

Behaviour. Fills its positioning parent behind the content, in columns sized by the count you pass.

<MasonryBackground
  images={["/a.jpg", "/b.jpg", "/c.jpg"]}
  gridColumns={12}
  gridRows={6}
  swapMinIntervalMs={3000}
  swapMaxIntervalMs={6000}
/>

<Motion>

import { Motion } from "@getnarro/core";

A Framer Motion animation wrapper Provides smooth, physics-based animations with 10+ built-in effects.

<Motion effect="slideUp" duration={0.5}>
  <h1>Animated Title</h1>
</Motion>

<MotionContainer>

import { MotionContainer } from "@getnarro/core";

Container for staggered child animations

Behaviour. Measures its content and animates its own height between states, so it must not be given a fixed height by a parent — the animation is that height changing.

<MotionContainer staggerDelay={0.1}>
  <Motion effect="slideUp">Item 1</Motion>
  <Motion effect="slideUp">Item 2</Motion>
  <Motion effect="slideUp">Item 3</Motion>
</MotionContainer>

<MotionList>

import { MotionList } from "@getnarro/core";

MotionList - Staggered list animation

<MotionNumber>

import { MotionNumber } from "@getnarro/core";

Animated number counter

Behaviour. Animates to its target and reserves no space for the widest value it will pass through, so a number that grows in digit count shifts the layout around it.

<MotionNumber value={1000000} prefix="$" separator duration={2} />

<MotionPresence>

import { MotionPresence } from "@getnarro/core";

MotionPresence - Wrapper for AnimatePresence with slide-aware animations

<MotionSpotlight>

import { MotionSpotlight } from "@getnarro/core";

Apple Keynote-style Magic Move for images Creates smooth zoom and pan animations between slides. Uses Framer Motion’s layout animations for seamless morphing.

Behaviour. Sizes itself from containerHeight and dims everything but the highlighted child; the children keep their own layout, only their opacity changes.

// Slide 1 - Overview
<MotionSpotlight
  layoutId="product"
  src="/product.jpg"
  alt="Product"
  x={50} y={50} scale={1}
  width={800} height={400}
/>

// Slide 2 - Zoomed
<MotionSpotlight
  layoutId="product"
  src="/product.jpg"
  alt="Product detail"
  x={25} y={50} scale={2.5}
  width={800} height={400}
/>

<MotionStep>

import { MotionStep } from "@getnarro/core";

Individual step within MotionSteps container Shows when the current step is >= this step’s number.

<MotionStep step={1} effect="scaleUp">
  <div>This appears on step 1</div>
</MotionStep>

<MotionSteps>

import { MotionSteps } from "@getnarro/core";

Container for step-by-step animations triggered by keystrokes Wrap MotionStep children to create a sequence of animations. Press arrow keys (right/down) to advance, (left/up) to go back.

<MotionSteps totalSteps={3}>
  <MotionStep step={0} effect="scaleUp">
    <div>First element (visible immediately)</div>
  </MotionStep>
  <MotionStep step={1} effect="slideRight">
    <div>Second element (press arrow key)</div>
  </MotionStep>
  <MotionStep step={2} effect="elastic">
    <div>Third element (press again)</div>
  </MotionStep>
</MotionSteps>

<MotionText>

import { MotionText } from "@getnarro/core";

Animated text with various effects

Behaviour. Animates per word or per character, which means the text is split into inline elements — a text-* utility on the parent still applies, but a selector expecting one text node will not match.

<MotionText type="typewriter" duration={0.05}>
  Hello, World!
</MotionText>

<MotionTransform>

import { MotionTransform } from "@getnarro/core";

Applies cumulative transforms to a single element across steps Use this inside MotionSteps to animate the SAME element through multiple transformation states (fade, zoom, move, rotate, etc.)

<MotionSteps totalSteps={4}>
  <MotionTransform
    transforms={[
      { opacity: 0 },                           // Step 0 (hidden)
      { opacity: 1 },                           // Step 1 (fade in)
      { opacity: 1, scale: 1.5 },              // Step 2 (zoom)
      { opacity: 1, scale: 1.5, x: 150 },      // Step 3 (move right)
    ]}
  >
    <div className="w-64 h-64 bg-blue-500">
      Transform me!
    </div>
  </MotionTransform>
</MotionSteps>

<NebulaBackground>

import { NebulaBackground } from "@getnarro/core";

An animated starfield with nebula glow, behind whatever you put in it.

Behaviour. Fills its positioning parent and sits behind the content. Give the slide position: relative (or put it directly in a Slide) or it will escape to the nearest positioned ancestor.

<NebulaBackground isActive>
  <Heading level={1}>Title over the stars</Heading>
</NebulaBackground>

<Notes>

import { Notes } from "@getnarro/core";

Notes component - Speaker notes Notes are not rendered in the main presentation view. They are meant to be displayed in presenter mode or exported separately.

<Slide>
  <h1>My Slide Title</h1>
  <Notes>
    Remember to explain the key points here.
    - Point 1
    - Point 2
  </Notes>
</Slide>

<OverviewGrid>

import { OverviewGrid } from "@getnarro/core";

OverviewGrid component - Displays slides in a grid for quick navigation

Behaviour. A full-screen overlay, not an in-slide element. Presentation renders it on O; you do not place it yourself.

<Presentation>

import { Presentation } from "@getnarro/core";

Presentation component - Root container

<Presentation>
  <Slide id="intro">
    <h1>Welcome</h1>
  </Slide>
  <Slide id="content">
    <h2>Main Content</h2>
  </Slide>
</Presentation>

<PresenterNotes>

import { PresenterNotes } from "@getnarro/core";

PresenterNotes component - live speaker-notes companion view.

<Slide>

import { Slide } from "@getnarro/core";

Slide component - Individual slide wrapper

<Slide id="intro" layout="title">
  <h1>Welcome to My Presentation</h1>
  <p>Subtitle goes here</p>
</Slide>

// With sub-slides
<Slide id="multi-step" subSlides={[
{ id: "step1", content: <div>Step 1</div> },
{ id: "step2", content: <div>Step 2</div>, transition: "slide-left" }
]} />

<SlideContent>

import { SlideContent } from "@getnarro/core";

SlideContent component - Content layout container

Behaviour. Fills the slide (h-full w-full). Every layout stacks its children vertically. default sets nothing else, so content anchors to the top and the rest of the canvas stays empty — for a content slide you usually want fill (a column, so a child with flex-1 takes the remaining space) or between. className overrides any of it.

<Slide>
  <SlideContent layout="centered">
    <h1>Centered Content</h1>
  </SlideContent>
</Slide>

<TransformSlide>

import { TransformSlide } from "@getnarro/core";

A slide with multiple sub-slides and transform-based navigation

Behaviour. Owns the whole slide and pans a larger canvas within it, so it cannot share a slide with ordinary content — its sub-slide positions are coordinates on that canvas.

<TrustedByMarquee>

import { TrustedByMarquee } from "@getnarro/core";

Rows of logos or names scrolling infinitely in alternating directions.

Behaviour. A full-width column of continuously scrolling rows, sized by its content. It animates forever, so it is a background rather than something to place beside content.

<TrustedByMarquee
  rows={[[{ name: "Acme", color: "#ffffff" }], [{ name: "Globex", color: "#60a5fa" }]]}
  isActive
  baseSpeed={40}
/>

@getnarro/replay

One component, imported from @getnarro/replay.

<Replay>

import { Replay } from "@getnarro/replay";

A recording of a real web app, in a page. Plays a cast — DOM, not video — so it stays sharp at any size and its text stays selectable.

Behaviour. Takes the width available and the height that follows from the recording’s own aspect ratio, the way an <img> does. It scales rather than reflows: the page was laid out once, at the viewport it was recorded at, and every scroll offset in the recording assumes that width. Pass fill for a box the parent has already sized — a slide region — where it letterboxes into whatever shape that box has.

@getnarro/shared-ui

54 components, imported from @getnarro/shared-ui.

<AgendaItem>

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

A styled agenda item component Displays an agenda item with a centered number in bold with a colored underline, followed by descriptive text. Useful for agenda presentations and step-by-step processes.

<AgendaItem number={1} title="Introduction" />
<AgendaItem number={2} title="Main Topic" underlineColor="#00BFA5" />

<AnimatedList>

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

List with staggered animations Note: Import the animations CSS file to use this component: import “@getnarro/shared-ui/styles/animations.css”;

Behaviour. A vertical column of its items with staggered entry; it does not inherit the surrounding list styling, and it is one element per item rather than a <ul>.

<AnimatedList
  items={['First point', 'Second point', 'Third point']}
  animation="slide-up"
  staggerDelay={150}
  variant="check"
/>

<Animation>

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

A CSS animation wrapper component When used inside a Slide component from narro, animations will only trigger when the slide becomes active. Note: Import the animations CSS file to use this component: import “@getnarro/shared-ui/styles/animations.css”;

<Animation type="slide-up" delay={200} duration={500}>
  <Heading level={1}>Animated Title</Heading>
</Animation>

<Badge>

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

a short inline label.

<Badge tone="success">WCAG AA</Badge>

<BigText>

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

Extremely large, impactful text component

<BigText effect="gradient" animate="blur-reveal">
  IMPACT
</BigText>

<Callout>

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

a card with a coloured edge, for the one thing on the slide that matters most.

<Callout tone="warning" title="Not swapped">
  This one is added, not replaced.
</Callout>

<Card>

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

a bordered surface.

<Card tone="primary" padding="lg">
  <Heading level={3}>Narro</Heading>
  <Text>Decks as code.</Text>
</Card>

<Chart>

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

A simple chart component Deliberately small: bar, line, pie and donut, drawn with CSS and SVG, for the one number a slide is about. There is no axis, no gridline, no tooltip and no stacking, and adding them is not the plan — a slide that needs a real chart should render it with a real charting library and place the image, which is a documented workflow rather than a shrug.

Behaviour. Bars are proportional to the largest value in this chart, unless max says otherwise. height is the whole component including the title and legend, and the plot is clamped to 80px, so give a bar chart at least 200px or the bars stop communicating. showValues reserves room for the value beside each bar.

<Chart
  type="bar"
  data={[
    { label: 'Q1', value: 100 },
    { label: 'Q2', value: 150 },
    { label: 'Q3', value: 200 },
  ]}
  title="Quarterly Sales"
/>

<Code>

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

A code block component with optional line numbers and copy button

Behaviour. Nothing is tokenised here. language is recorded as a language-* class and used for the label; it does not colour anything. A markdown fence is highlighted — Narro tokenises it when the deck compiles — but this component takes its code as children at runtime, and a React deck has no compile step to do it in. Highlighting it would mean shipping a highlighter and its grammars to the browser, which for a runtime the docs already apologise for is a worse trade than grey code.

If the colour is load-bearing in a React deck, run Shiki’s codeToHtml at build time and drop the result in — it keys off the same language-* class. See Limitations.

<Code language="typescript" lineNumbers>
{`const greeting = "Hello, World!";
console.log(greeting);`}
</Code>

<CommentForm>

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

A form for creating or editing comments

<CommentForm
  slideId="slide-1"
  defaultAuthor="John Doe"
  onSubmit={(comment) => handleAddComment(comment)}
  onCancel={() => setShowForm(false)}
/>

<CommentItem>

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

Displays a single comment with actions

<CommentItem
  comment={comment}
  onEdit={(id) => handleEdit(id)}
  onDelete={(id) => handleDelete(id)}
  onResolve={(id, resolved) => handleResolve(id, resolved)}
/>

<CommentMarker>

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

A visual indicator for comment positions on slides

<CommentMarker
  position={{ x: 50, y: 30 }}
  count={3}
  onClick={() => setShowComments(true)}
/>

<CommentPanel>

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

A sidebar panel for managing comments

<CommentPanel
  slideId="slide-1"
  comments={allComments}
  onAddComment={(comment) => addComment(comment)}
  onDeleteComment={(id) => deleteComment(id)}
  currentUser="John Doe"
/>

<ContentSlide>

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

A slide with optional title and content area

<ContentSlide title="Key Features">
  <List items={['Feature 1', 'Feature 2', 'Feature 3']} />
</ContentSlide>

<CountingNumber>

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

Animated number counter

<CountingNumber
  value={1000000}
  duration={2000}
  format={{ prefix: "$", separator: true }}
/>

<Diagram>

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

a monospaced block for ASCII diagrams. children is ReactNode, not a string, so individual nodes of a tree can be coloured with a <span> inside the block — which is how “these components re-rendered and these did not” gets said without a drawing primitive. The type size lives on the inner <pre>: pass preClassName, or a text-* utility in className, which cn will resolve in your favour.

<Diagram preClassName="text-xl">
{`
  +--------+     +--------+
  | Client | --> | Server |
  +--------+     +--------+
`}
</Diagram>

// Individual nodes styled, because children are nodes rather than text.
<Diagram>
  {"Client\n  "}
  <span style={{ color: "#f43f5e" }}>{"Server (re-rendered)"}</span>
</Diagram>

<DottedArc>

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

Decorative concentric dotted arcs Creates a series of concentric arcs with dashed lines in varying colors. Used as a decorative element for title slides and maintaining brand consistency.

<DottedArc
  colors={["#ff6b35", "#4ecdc4", "#1a535c"]}
  position="bottom-right"
/>

// Custom sizing and spacing
<DottedArc
  colors={["orange", "green", "blue"]}
  width={3}
  spacing={10}
  size={400}
  position="bottom-left"
/>

<DualColumnTextAndImage>

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

A two-column layout where text is on one side and an image is on the other

Behaviour. A full-height flex row: text in one column, image in the other, each taking the whole height. It expects to be the slide’s main content rather than to sit under a heading.

<DualColumnTextAndImage
  text="This is the text content"
  image="/path/to/image.png"
  imageAlt="Description of image"
  gap="md"
/>

<Embed>

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

External content embedding component Supports YouTube, Vimeo, Google Slides, websites, web applications, and generic iframes.

// Embed a YouTube video
<Embed
  url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Video demonstration"
  aspectRatio="16:9"
/>

// Embed a web application with sandbox restrictions
<Embed
  url="https://codesandbox.io/embed/..."
  title="Live code demo"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
/>

// Embed a website
<Embed
  url="https://example.com"
  title="Example website"
  aspectRatio="16:9"
/>

<FlowDiagram>

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

A visual representation of a process flow with steps

Behaviour. Lays its steps along a single axis chosen by direction, full width, with connectors between adjacent steps. It draws a chain — there is no branching or converging.

<FlowDiagram
  steps={[
    {label: 'Step 1', icon: '/icon1.png', description: 'First step'},
    {label: 'Step 2', icon: '/icon2.png', description: 'Second step'}
  ]}
  direction="horizontal"
  color="#08979c"
/>

<FourColumn>

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

A four-column layout component with equal columns

<FourColumn
  first={<Text>Column 1</Text>}
  second={<Text>Column 2</Text>}
  third={<Text>Column 3</Text>}
  fourth={<Text>Column 4</Text>}
  gap="lg"
  align="center"
/>

<Fragment>

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

Step-by-step reveal component Each Fragment animates in sequence based on its order prop. The delay is calculated as: order * staggerDelay When used inside a Slide component from narro, animations will only trigger when the slide becomes active. Note: Import the animations CSS file to use this component: import “@getnarro/shared-ui/styles/animations.css”;

<Fragment order={1} effect="fade-in">
  <Text>This appears first (after 400ms)</Text>
</Fragment>
<Fragment order={2} effect="slide-up">
  <Text>This appears second (after 800ms)</Text>
</Fragment>

<Grid>

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

A flexible grid layout component

<Grid columns={3} gap="md">
  <InfoCardWithIcon title="First">Item 1</InfoCardWithIcon>
  <InfoCardWithIcon title="Second">Item 2</InfoCardWithIcon>
  <InfoCardWithIcon title="Third">Item 3</InfoCardWithIcon>
</Grid>

<Heading>

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

A styled heading component (h1-h6)

Behaviour. level picks both the tag and the type scale, and the scale is a class — so className="text-[13rem]" replaces it rather than losing to it. Margin is zeroed; add your own with className.

<Heading level={1}>Main Title</Heading>
<Heading level={2} color="primary">Subtitle</Heading>

<HexPatternBackground>

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

A background with a hexagonal pattern

Behaviour. Fills its positioning parent and sits behind the content, like every background. It sets no size of its own, so an unpositioned parent leaves it covering the viewport.

<HexPatternBackground backgroundColor="#00d9c4" hexColor="#08979c">
  <h1>Content here</h1>
</HexPatternBackground>

<Icon>

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

A simple icon component A small closed set of typographic symbols — see ICON_NAMES. It is not a logo set and does not aim to be: an icon library that resolves names at runtime cannot be tree-shaken, so it would ship every glyph to every deck, on a runtime this library’s own documentation already apologises for. For a brand mark, use Image with the logo file. github used to be in the set, drawn as ⌘ — the Command key — which is a wrong answer rather than a rough one.

Behaviour. A name outside the set draws nothing and reports to the console. It used to render the name as text, so <Icon name="rocket" /> put the word “rocket” on the slide. TypeScript catches this now; the runtime guard is for a name computed at runtime, and it reports as an error so narro check --fit — which fails a deck whose page logged one — catches it too.

<Icon name="check" size="lg" color="green" />
<Icon name="terminal" size={32} />

<Image>

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

An optimized image component with filter support

<Image
  src="/images/photo.jpg"
  alt="A beautiful landscape"
  fit="cover"
  rounded="lg"
  shadow
  filter="grayscale"
/>

// Custom filter:
<Image
  src="/images/photo.jpg"
  alt="Custom filtered"
  customFilter="brightness(80%) contrast(110%)"
/>

// Color overlay:
<Image
  src="/images/photo.jpg"
  alt="Blue tinted"
  overlay="#3b82f6"
  overlayOpacity={0.4}
/>

<ImageBackground>

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

A full-bleed background image with content overlay

<ImageBackground
  src="/images/hero.jpg"
  alt="Hero background"
  overlay="dark"
  kenBurns
>
  <Heading level={1}>Bold Title</Heading>
  <Text>Subtitle text here</Text>
</ImageBackground>

<ImageSlide>

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

A full-bleed image slide with optional overlay

<ImageSlide
  src="/images/hero.jpg"
  alt="Hero image"
  overlay={<Heading level={1}>Welcome</Heading>}
  overlayPosition="center"
/>

<ImageSpotlight>

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

Keynote-style Magic Move for images Creates smooth zoom and pan animations between slides. Elements with the same spotlightId will animate smoothly when transitioning between slides.

// Slide 1 - Overview (centered, no zoom)
<ImageSpotlight
  spotlightId="diagram"
  src="/architecture.svg"
  alt="Architecture diagram"
  x={50}
  y={50}
  scale={1}
  width="100%"
  height={400}
/>

// Slide 2 - Zoom to top-left element
<ImageSpotlight
  spotlightId="diagram"
  src="/architecture.svg"
  alt="Architecture diagram"
  x={25}
  y={25}
  scale={2.5}
  width="100%"
  height={400}
/>

// Slide 3 - Pan to bottom-right element
<ImageSpotlight
  spotlightId="diagram"
  src="/architecture.svg"
  alt="Architecture diagram"
  x={75}
  y={75}
  scale={2.5}
  width="100%"
  height={400}
/>

<InfoCardWithIcon>

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

A styled information card with icon Displays an icon on the left with bold headings and descriptive text to the right. Uses consistent alignment and spacing. Perfect for concept highlights and important points.

<InfoCardWithIcon
  iconSrc="/icon.svg"
  title="Key Feature"
  description="This is an important concept to highlight"
/>

<List>

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

An animated list component

<List
  items={['First point', 'Second point', 'Third point']}
  variant="check"
  animated
/>

<LogoGrid>

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

A grid layout for displaying multiple logos with even spacing

Behaviour. A CSS grid of exactly columns equal columns, full width, each cell centring its logo. Rows wrap as needed; there is no way to size an individual cell. An entry with no src is set as a wordmark, so a text-only row of names is one call rather than a Grid of Cards.

<LogoGrid
  logos={[
    {src: '/path/to/logo1.png', name: 'Company 1'},
    {src: '/path/to/logo2.png', name: 'Company 2'}
  ]}
  columns={3}
  gap="md"
/>

<MorphElement>

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

Element that morphs across slides using View Transitions API When elements with the same transitionName exist on consecutive slides, they will smoothly morph into each other during slide transitions.

// Slide 1
<MorphElement transitionName="hero-image">
  <img src="product.jpg" style={{ width: 200 }} />
</MorphElement>

// Slide 2 - same transitionName, different size
<MorphElement transitionName="hero-image">
  <img src="product.jpg" style={{ width: "100%" }} />
</MorphElement>

<ProcessFlowChart>

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

Interactive flowchart for process visualization Creates a flowchart with customizable nodes and connections. Nodes are automatically laid out based on the direction prop, and connections are drawn between them with arrows.

Behaviour. Draws a chain, not a graph: nodes sit in one line in array order along direction, and connections only chooses which arrows appear between those fixed positions. A fan-in, a branch or a cycle will not lay out — use Canvas with CanvasElement, or an SVG placed with Image. Node size is 220×90 by default; the chart sizes itself to the nodes.

<ProcessFlowChart
  nodes={[
    { id: "start", label: "Start", color: "#4ecdc4" },
    { id: "process", label: "Process", color: "#ff6b35" },
    { id: "end", label: "End", color: "#95e1d3" }
  ]}
  connections={[
    { from: "start", to: "process" },
    { from: "process", to: "end" }
  ]}
  direction="horizontal"
/>

// Vertical flow with custom styling
<ProcessFlowChart
  nodes={[
    { id: "1", label: "Input", color: "#1a535c", textColor: "#fff" },
    { id: "2", label: "Transform", color: "#4ecdc4" },
    { id: "3", label: "Output", color: "#ff6b35", textColor: "#fff" }
  ]}
  connections={[
    { from: "1", to: "2", label: "data" },
    { from: "2", to: "3", label: "result" }
  ]}
  direction="vertical"
  nodeGap="lg"
  arrowStyle="dashed"
/>

<ProfileCard>

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

A styled profile card component Displays a profile image, name, title, and associated company icons. Perfect for team introductions and speaker introductions.

<ProfileCard
  imageSrc="/avatar.jpg"
  name="John Doe"
  title="CEO & Founder"
  companyIcons={["/company1.svg", "/company2.svg"]}
/>

<ProgressRing>

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

Animated circular progress indicator

Behaviour. A square of size pixels — both axes — laid out inline. The label sits at the centre of the ring rather than under it.

<ProgressRing value={75} size={120} showValue />

<Quote>

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

A styled blockquote component

<Quote
  author="Albert Einstein"
  source="Interview, 1929"
>
  "Imagination is more important than knowledge."
</Quote>

<Reveal>

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

Fragment - Step-by-step reveal component Each Fragment animates in sequence based on its order prop. The delay is calculated as: order * staggerDelay When used inside a Slide component from narro, animations will only trigger when the slide becomes active. Note: Import the animations CSS file to use this component: import “@getnarro/shared-ui/styles/animations.css”;

<Fragment order={1} effect="fade-in">
  <Text>This appears first (after 400ms)</Text>
</Fragment>
<Fragment order={2} effect="slide-up">
  <Text>This appears second (after 800ms)</Text>
</Fragment>

<ScrollableImage>

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

Displays a scrollable image Perfect for displaying full-page website screenshots that are too tall to fit in a slide.

// Basic scrollable image
<ScrollableImage
  src="/screenshots/long-page.png"
  alt="Full page screenshot"
  maxHeight="70vh"
/>

// With auto-scroll
<ScrollableImage
  src="/screenshots/website.png"
  alt="Website screenshot"
  maxHeight="70vh"
  autoScrollSpeed={50}
  showIndicators
/>