Component Reference

78 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

<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

<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

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

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

<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

<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

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

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

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

<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

<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

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

<TransformSlide>

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

<TrustedByMarquee>

Rows of logos or names scrolling infinitely in alternating directions.

<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”;

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

<BigText>

Extremely large, impactful text component

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

<Chart>

A simple chart component This is a basic CSS-based implementation suitable for presentations. For more advanced charts, consider integrating with Chart.js or Recharts.

<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 Note: This is a basic implementation. For production use, consider integrating with Shiki or Prism for proper syntax highlighting.

<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 diagram rendering component This is a basic text/pre-formatted implementation. For actual Mermaid support, integrate with the mermaid library: https://mermaid.js.org/

// Text/ASCII diagram
<Diagram type="text">
{`
  +--------+     +--------+
  | Client | --> | Server |
  +--------+     +--------+
`}
</Diagram>

// Mermaid (requires mermaid library integration)
<Diagram type="mermaid">
{`graph LR
  A[Client] --> B[Server]
  B --> C[Database]`}
</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

<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

<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">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

<Heading>

A styled heading component (h1-h6)

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

<HexPatternBackground>

A background with a hexagonal pattern

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

<Icon>

A simple icon component This is a basic implementation using Unicode symbols and emoji. For production use with custom icons, consider integrating with a proper icon library like Lucide, Heroicons, or Font Awesome.

<Icon name="check" size="lg" color="green" />
<Icon name="github" 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

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

<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

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

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

<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

<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

<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

<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”;

<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

<ZoomImage>

Image with click-to-zoom functionality

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