🧩 Component Reference

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

@getnarro/core

<AnimatePresence>

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.

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

<Canvas>

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>

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:
```tsx
<CanvasElement x="100px" y="50px" width="200px" height="100px">
  <div>Positioned at 100px, 50px</div>
</CanvasElement>

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | yes | Children content |
| `x` | `PositionValue` | yes | X position (% or px) |
| `y` | `PositionValue` | yes | Y position (% or px) |
| `className` | `string` | — | Additional CSS classes |
| `height` | `PositionValue` | — | Height (% or px, optional) |
| `opacity` | `number` | — | Opacity (0-1) |
| `rotate` | `number` | — | Rotation in degrees |
| `width` | `PositionValue` | — | Width (% or px, optional) |
| `zIndex` | `number` | — | Z-index for layering |

### `<CanvasShape>`

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.

```tsx
<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>

Error Boundary component that catches errors and displays the overlay

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

<ErrorOverlay>

Error overlay component for development

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

<MarqueeRow>

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>

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>

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>

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>

MotionList - Staggered list animation

<MotionNumber>

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>

MotionPresence - Wrapper for AnimatePresence with slide-aware animations

<MotionSpotlight>

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>

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>

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>

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>

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>

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>

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>

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>

Presentation component - Root container

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

<PresenterNotes>

PresenterNotes component - live speaker-notes companion view.

<Slide>

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
```tsx
<Slide id="multi-step" subSlides={[
{ id: "step1", content: <div>Step 1</div> },
{ id: "step2", content: <div>Step 2</div>, transition: "slide-left" }
]} />

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `__slideIndex` | `number` | — | Internal: Explicit slide index from Presentation component |
| `background` | `string` | — | Background color or image |
| `children` | `ReactNode` | — | Children content |
| `className` | `string` | — | Additional CSS classes |
| `id` | `string` | — | Unique identifier for the slide |
| `layout` | `LayoutType` | — | Layout type (default: "default") |
| `subSlides` | `SubSlide[]` | — | Sub-slides for multi-step content within this slide |
| `transition` | `TransitionEffect` | — | Transition effect |

### `<SlideContent>`

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.

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

<TransformSlide>

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>

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/shared-ui

<AgendaItem>

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>

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>

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>

a short inline label.

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

<BigText>

Extremely large, impactful text component

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

<Callout>

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>

a bordered surface.

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

<Chart>

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>

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>

A form for creating or editing comments

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

<CommentItem>

Displays a single comment with actions

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

<CommentMarker>

A visual indicator for comment positions on slides

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

<CommentPanel>

A sidebar panel for managing comments

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

<ContentSlide>

A slide with optional title and content area

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

<CountingNumber>

Animated number counter

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

<Diagram>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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:
```tsx
<Image
  src="/images/photo.jpg"
  alt="Custom filtered"
  customFilter="brightness(80%) contrast(110%)"
/>

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

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `alt` | `string` | yes | Alt text for accessibility |
| `src` | `string` | yes | Image source URL |
| `children` | `ReactNode` | — | Children content |
| `className` | `string` | — | Additional CSS classes |
| `customFilter` | `string` | — | Custom CSS filter value (overrides filter preset) |
| `filter` | `ImageFilter` | — | Apply CSS filter preset |
| `fit` | `"none" \| "cover" \| "contain" \| "fill"` | — | Object fit mode |
| `height` | `string \| number` | — | Height constraint |
| `overlay` | `string` | — | Color overlay (CSS color value) |
| `overlayOpacity` | `number` | — | Opacity of the color overlay (0-1, default: 0.5) |
| `rounded` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | — | Border radius |
| `shadow` | `boolean` | — | Add shadow |
| `width` | `string \| number` | — | Width constraint |

### `<ImageBackground>`

A full-bleed background image with content overlay

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

<ImageSlide>

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>

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>

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>

An animated list component

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

<LogoGrid>

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>

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>

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>

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>

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>

A styled blockquote component

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

<Reveal>

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>

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

<ScrollableImage>

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
/>

<Text>

A styled text block component

Behaviour. Renders a <p> with no margin, so spacing between blocks is yours to set — className="mt-16" works. Size and weight are classes, so className overrides them.

<Text size="lg" weight="medium">
  This is styled body text for your slides.
</Text>

<ThreeColumn>

A three-column layout component

<ThreeColumn
  first={<Text>First column</Text>}
  second={<Text>Second column</Text>}
  third={<Image src="image.jpg" alt="Third column" />}
  ratio="1:2:1"
  gap="lg"
/>

<TimelineWithIndicators>

A horizontal timeline component Creates a horizontal timeline with circular indicators linked by a line. Includes labels below each indicator. Perfect for historical overviews and progress tracking.

<TimelineWithIndicators
  events={[
    { year: "2020", label: "Founded" },
    { year: "2021", label: "Series A" },
    { year: "2022", label: "Expansion" },
  ]}
  lineColor="#14b8a6"
/>

<TitleSlide>

A centered title slide layout

<TitleSlide
  title="Welcome to My Presentation"
  subtitle="An Overview of Our Progress"
  author="John Doe"
  date="January 2025"
/>

<TitleSlideWithElement>

A title slide with a flexible element area

<TitleSlideWithElement
  title="Product Launch"
  subtitle="Introducing our newest innovation"
  element={<Image src="product.png" alt="Product" />}
  elementPosition="right"
  elementAnimation="fade-in"
/>

<TwoColumn>

A two-column layout component

Behaviour. A CSS grid with p-8 of its own padding. It sizes to its content unless you pass fill, which makes it take the parent’s full height — under a heading, fill needs <SlideContent layout="fill"> above it, or the columns take the whole canvas plus the heading and overflow.

<TwoColumn
  left={<Text>Left content</Text>}
  right={<Image src="image.jpg" alt="Right image" />}
  ratio="2:1"
/>

<TwoColumnHighlight>

Two-column layout with highlighted sections A layout component featuring two columns with different backgrounds, typically used for section headers or emphasizing key points. The left column is typically darker with a narrower width.

<TwoColumnHighlight
  leftContent={<Heading level={1}>Section Title</Heading>}
  rightContent={<Text>Description text goes here</Text>}
  ratio="1:2"
/>

// With custom colors
<TwoColumnHighlight
  leftContent="Key Point"
  rightContent="Detailed explanation"
  leftBg="#000000"
  rightBg="#ffffff"
  leftTextColor="#ffffff"
  rightTextColor="#000000"
  highlightColor="#ff6b35"
/>

<TypewriterText>

Text that appears character by character

Behaviour. Reserves no space for the text it has not typed yet, so the surrounding layout shifts as it types. Give it a fixed-height parent when that matters. The cursor is 1em tall and part of the line box.

<TypewriterText speed="medium" cursor>
  Hello, World!
</TypewriterText>

<Video>

A video embedding component

<Video
  src="/videos/demo.mp4"
  poster="/images/poster.jpg"
  title="Product demo video"
  autoPlay
  loop
  muted
/>

<WaveLine>

A decorative curved dashed line component Creates a smooth, curved dashed line that spans across a slide to add dynamic visual elements. Perfect for title slide decoration and section separators.

<WaveLine />
<WaveLine color="#00BFA5" dashWidth={3} />

<WordReveal>

Text that reveals word by word Note: Import the animations CSS file to use this component: import “@getnarro/shared-ui/styles/animations.css”;

<WordReveal animation="blur" staggerDelay={100}>
  This text will appear word by word
</WordReveal>

<Workflow>

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

Behaviour. Lays its steps along the axis direction chooses, with fixed-height connectors between them. The step circles are a fixed 48px regardless of the canvas.

<Workflow animation="progressive" direction="horizontal">
  <WorkflowStep icon="1" title="Start">Begin here</WorkflowStep>
  <WorkflowStep icon="2" title="Process">Do the work</WorkflowStep>
  <WorkflowStep icon="3" title="Complete">All done!</WorkflowStep>
</Workflow>

<WorkflowStep>

Individual step in a workflow

Behaviour. One step of a Workflow, with a fixed 48px marker. Used on its own it still renders the marker and its own layout, but no connectors.

<ZoomImage>

Image with click-to-zoom functionality

Behaviour. Takes its height when given one and its natural size otherwise, so a zoom inside a fixed-height parent needs an explicit height or it will grow the parent.

<ZoomImage
  src="/diagram.png"
  alt="Architecture diagram"
  zoomable
  zoomScale={2}
/>