Animated Title
\nMy Slide Title
\nWelcome
\nMain Content
\nWelcome to My Presentation
\nSubtitle goes here
\nCentered Content
\n- `.",
"examples": [
"
\n{`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n"
],
"props": [
{
"name": "children",
"type": "string",
"required": true,
"description": "Code content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "copyButton",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Show copy button"
},
{
"name": "highlightLines",
"type": "string",
"required": false,
"description": "Lines to highlight (comma-separated or range)"
},
{
"name": "language",
"type": "string",
"required": false,
"description": "Programming language"
},
{
"name": "lineNumbers",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Show line numbers"
},
{
"name": "preClassName",
"type": "string",
"required": false,
"description": "Classes for the inner ``, which is what carries the type size. The size used to be an inline style, so `className=\"text-[12px]\"` on the block did nothing and there was no way to shrink code to fit a slide. Both work now; this is the direct spelling."
},
{
"name": "theme",
"type": "\"dark\" | \"light\"",
"required": false,
"defaultValue": "\"dark\"",
"description": "Theme variant"
}
]
},
{
"name": "CommentForm",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A form for creating or editing comments",
"examples": [
" handleAddComment(comment)}\n onCancel={() => setShowForm(false)}\n/>"
],
"props": [
{
"name": "onSubmit",
"type": "(comment: Omit) => void",
"required": true,
"description": "Callback when comment is submitted"
},
{
"name": "slideId",
"type": "string",
"required": true,
"description": "Slide ID to add comment to"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "defaultAuthor",
"type": "string",
"required": false,
"defaultValue": "\"\"",
"description": "Default author name"
},
{
"name": "initialContent",
"type": "string",
"required": false,
"defaultValue": "\"\"",
"description": "Initial content (for editing)"
},
{
"name": "isEditing",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Whether this is editing an existing comment"
},
{
"name": "onCancel",
"type": "(() => void)",
"required": false,
"description": "Callback when form is cancelled"
},
{
"name": "parentId",
"type": "string",
"required": false,
"description": "Parent comment ID for replies"
},
{
"name": "placeholder",
"type": "string",
"required": false,
"defaultValue": "\"Add a comment...\"",
"description": "Placeholder text"
},
{
"name": "position",
"type": "CommentPosition",
"required": false,
"description": "Position for inline comments"
}
]
},
{
"name": "CommentItem",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "Displays a single comment with actions",
"examples": [
" handleEdit(id)}\n onDelete={(id) => handleDelete(id)}\n onResolve={(id, resolved) => handleResolve(id, resolved)}\n/>"
],
"props": [
{
"name": "comment",
"type": "SlideComment",
"required": true,
"description": "The comment to display"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "currentUser",
"type": "string",
"required": false,
"description": "Current user's name (to determine if they can edit/delete)"
},
{
"name": "onDelete",
"type": "((commentId: string) => void)",
"required": false,
"description": "Callback when delete is clicked"
},
{
"name": "onEdit",
"type": "((commentId: string) => void)",
"required": false,
"description": "Callback when edit is clicked"
},
{
"name": "onReaction",
"type": "((commentId: string, emoji: string) => void)",
"required": false,
"description": "Callback when a reaction is added"
},
{
"name": "onReply",
"type": "((commentId: string, content: string) => void)",
"required": false,
"description": "Callback when reply is submitted"
},
{
"name": "onResolve",
"type": "((commentId: string, resolved: boolean) => void)",
"required": false,
"description": "Callback when resolve is toggled"
},
{
"name": "replies",
"type": "SlideComment[]",
"required": false,
"defaultValue": "[]",
"description": "Child comments (replies)"
},
{
"name": "showReplyForm",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Whether to show the reply form"
}
]
},
{
"name": "CommentMarker",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A visual indicator for comment positions on slides",
"examples": [
" setShowComments(true)}\n/>"
],
"props": [
{
"name": "position",
"type": "CommentPosition",
"required": true,
"description": "Position of the marker on the slide (percentage 0-100)"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "commentId",
"type": "string",
"required": false,
"description": "Comment ID this marker represents"
},
{
"name": "count",
"type": "number",
"required": false,
"defaultValue": "1",
"description": "Number of comments at this position"
},
{
"name": "isActive",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Whether the marker is in an active/selected state"
},
{
"name": "onClick",
"type": "(() => void)",
"required": false,
"description": "Callback when marker is clicked"
}
]
},
{
"name": "CommentPanel",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A sidebar panel for managing comments",
"examples": [
" addComment(comment)}\n onDeleteComment={(id) => deleteComment(id)}\n currentUser=\"John Doe\"\n/>"
],
"props": [
{
"name": "comments",
"type": "SlideComment[]",
"required": true,
"description": "All comments data"
},
{
"name": "onAddComment",
"type": "(comment: Omit) => void",
"required": true,
"description": "Callback to add a new comment"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "currentUser",
"type": "string",
"required": false,
"description": "Current user name"
},
{
"name": "filter",
"type": "CommentFilterOptions",
"required": false,
"description": "Filter options"
},
{
"name": "isCollapsed",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Whether the panel is in collapsed state"
},
{
"name": "onCollapseChange",
"type": "((collapsed: boolean) => void)",
"required": false,
"description": "Callback when collapse state changes"
},
{
"name": "onDeleteComment",
"type": "((commentId: string) => void)",
"required": false,
"description": "Callback to delete a comment"
},
{
"name": "onFilterChange",
"type": "((filter: CommentFilterOptions) => void)",
"required": false,
"description": "Callback when filter changes"
},
{
"name": "onResolveComment",
"type": "((commentId: string, resolved: boolean) => void)",
"required": false,
"description": "Callback to resolve/unresolve a comment"
},
{
"name": "onUpdateComment",
"type": "((commentId: string, updates: Partial) => void)",
"required": false,
"description": "Callback to update a comment"
},
{
"name": "slideId",
"type": "string",
"required": false,
"description": "Slide ID to show comments for (if undefined, shows all)"
}
]
},
{
"name": "ContentSlide",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A slide with optional title and content area",
"examples": [
"\n
\n "
],
"props": [
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "title",
"type": "ReactNode",
"required": false,
"description": "Slide title"
}
]
},
{
"name": "CountingNumber",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/CountingNumber.tsx",
"description": "Animated number counter",
"examples": [
"`: pass `preClassName`, or a `text-*` utility in `className`, which `cn` will resolve in your favour.",
"examples": [
"\n{`\n +--------+ +--------+\n | Client | --> | Server |\n +--------+ +--------+\n`}\n ",
"// Individual nodes styled, because children are nodes rather than text.\n\n {\"Client\\n \"}\n {\"Server (re-rendered)\"}\n "
],
"props": [
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "preClassName",
"type": "string",
"required": false,
"description": "Classes for the inner ``, which is what carries the type size. `className` lands on the wrapper, so sizing the diagram used to need `[&_pre]:!text-xl` — an arbitrary variant plus an `!important`, for the one thing every author changes. The ``'s own defaults are classes now, so either works; this is the direct spelling."
},
{
"name": "theme",
"type": "\"dark\" | \"light\" | \"forest\"",
"required": false,
"defaultValue": "\"dark\"",
"description": "Diagram theme"
}
]
},
{
"name": "DottedArc",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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.",
"examples": [
"",
"// Custom sizing and spacing\n"
],
"props": [
{
"name": "colors",
"type": "string[]",
"required": true,
"description": "Array of colors for each arc"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "position",
"type": "\"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"",
"required": false,
"defaultValue": "\"bottom-right\"",
"description": "Arc position"
},
{
"name": "size",
"type": "number",
"required": false,
"defaultValue": "300",
"description": "Size of the arc container"
},
{
"name": "spacing",
"type": "number",
"required": false,
"defaultValue": "8",
"description": "Spacing between arcs"
},
{
"name": "width",
"type": "number",
"required": false,
"defaultValue": "2",
"description": "Line width for arcs"
}
]
},
{
"name": "DualColumnTextAndImage",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/DualColumnTextAndImage.tsx",
"description": "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\ntaking the whole height. It expects to be the slide's main content rather than to\nsit under a heading.",
"examples": [
""
],
"props": [
{
"name": "image",
"type": "string",
"required": true,
"description": "URL of the image to display in the right column"
},
{
"name": "text",
"type": "ReactNode",
"required": true,
"description": "Text content to display in the left column"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"lg\"",
"description": "Gap between columns"
},
{
"name": "imageAlt",
"type": "string",
"required": false,
"defaultValue": "\"\"",
"description": "Alt text for the image"
},
{
"name": "reverse",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Reverse the layout (image left, text right)"
}
]
},
{
"name": "Embed",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "External content embedding component Supports YouTube, Vimeo, Google Slides, websites, web applications, and generic iframes.",
"examples": [
"// Embed a YouTube video\n\n\n// Embed a web application with sandbox restrictions\n\n\n// Embed a website\n"
],
"props": [
{
"name": "url",
"type": "string",
"required": true,
"description": "URL to embed (YouTube, Vimeo, websites, web apps, etc.)"
},
{
"name": "allow",
"type": "string",
"required": false,
"defaultValue": "\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"",
"description": "Custom permissions for iframe (default includes common permissions)"
},
{
"name": "allowFullscreen",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Allow fullscreen"
},
{
"name": "aspectRatio",
"type": "\"1:1\" | \"16:9\" | \"4:3\"",
"required": false,
"defaultValue": "\"16:9\"",
"description": "Aspect ratio"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "loading",
"type": "\"lazy\" | \"eager\"",
"required": false,
"defaultValue": "\"eager\"",
"description": "Lazy loading strategy"
},
{
"name": "referrerPolicy",
"type": "\"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
"required": false,
"description": "Referrer policy"
},
{
"name": "sandbox",
"type": "string",
"required": false,
"description": "Sandbox restrictions for iframe security"
},
{
"name": "title",
"type": "string",
"required": false,
"defaultValue": "\"Embedded content\"",
"description": "Embed title for accessibility"
}
]
},
{
"name": "FlowDiagram",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/FlowDiagram.tsx",
"description": "A visual representation of a process flow with steps",
"behaviour": "Lays its steps along a single axis chosen by `direction`, full width,\nwith connectors between adjacent steps. It draws a chain — there is no branching\nor converging.",
"examples": [
""
],
"props": [
{
"name": "steps",
"type": "FlowStep[]",
"required": true,
"description": "List of steps with labels and optional icons"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "color",
"type": "string",
"required": false,
"defaultValue": "\"#08979c\"",
"description": "Color for step boxes and connectors"
},
{
"name": "direction",
"type": "\"horizontal\" | \"vertical\"",
"required": false,
"defaultValue": "\"vertical\"",
"description": "Direction of flow"
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between steps"
}
]
},
{
"name": "FourColumn",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A four-column layout component with equal columns",
"examples": [
"Column 1}\n second={Column 2 }\n third={Column 3 }\n fourth={Column 4 }\n gap=\"lg\"\n align=\"center\"\n/>"
],
"props": [
{
"name": "first",
"type": "ReactNode",
"required": true,
"description": "First column content"
},
{
"name": "fourth",
"type": "ReactNode",
"required": true,
"description": "Fourth column content"
},
{
"name": "second",
"type": "ReactNode",
"required": true,
"description": "Second column content"
},
{
"name": "third",
"type": "ReactNode",
"required": true,
"description": "Third column content"
},
{
"name": "align",
"type": "\"center\" | \"start\" | \"end\" | \"stretch\"",
"required": false,
"defaultValue": "\"stretch\"",
"description": "Vertical alignment"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between columns"
},
{
"name": "responsive",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Stack columns on small screens"
}
]
},
{
"name": "Fragment",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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\";",
"examples": [
"\n This appears first (after 400ms) \n \n\n This appears second (after 800ms) \n "
],
"props": [
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "duration",
"type": "number",
"required": false,
"defaultValue": "300",
"description": "Animation duration (ms)"
},
{
"name": "effect",
"type": "FragmentEffect",
"required": false,
"defaultValue": "DEFAULT_EFFECT",
"description": "Animation effect"
},
{
"name": "isActive",
"type": "boolean",
"required": false,
"description": "Override slide active state (for use without narro context)"
},
{
"name": "order",
"type": "number",
"required": false,
"description": "Order in which fragment appears"
},
{
"name": "staggerDelay",
"type": "number",
"required": false,
"defaultValue": "DEFAULT_STAGGER_DELAY",
"description": "Delay between each fragment (ms) - used to stagger animations"
},
{
"name": "trigger",
"type": "\"time\" | \"step\"",
"required": false,
"defaultValue": "\"step\"",
"description": "What reveals the fragment. `\"step\"` (the default) waits for the presenter: each press reveals the next fragment and the press after the last one advances the slide. `\"time\"` reveals everything on slide entry, staggered by `order` — the behaviour before reveals were wired to navigation. Outside a `Slide` there is nothing to step, so `\"time\"` is used whatever this says."
}
]
},
{
"name": "Grid",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A flexible grid layout component",
"examples": [
"\n Item 1 \n Item 2 \n Item 3 \n "
],
"props": [
{
"name": "align",
"type": "\"center\" | \"start\" | \"end\" | \"stretch\"",
"required": false,
"defaultValue": "\"stretch\"",
"description": "Horizontal alignment"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "columns",
"type": "2 | 3 | 4 | 5 | 6 | 1",
"required": false,
"defaultValue": "3",
"description": "Number of columns"
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between items"
},
{
"name": "justify",
"type": "\"center\" | \"start\" | \"end\" | \"stretch\"",
"required": false,
"defaultValue": "\"start\"",
"description": "Vertical alignment"
}
]
},
{
"name": "Heading",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A styled heading component (h1-h6)",
"behaviour": "`level` picks both the tag and the type scale, and the scale is a\nclass — so `className=\"text-[13rem]\"` replaces it rather than losing to it.\nMargin is zeroed; add your own with `className`.",
"examples": [
"Main Title \nSubtitle "
],
"props": [
{
"name": "align",
"type": "\"center\" | \"left\" | \"right\"",
"required": false,
"defaultValue": "\"left\"",
"description": "Text alignment"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "color",
"type": "\"default\" | \"primary\" | \"muted\" | \"accent\"",
"required": false,
"defaultValue": "\"default\"",
"description": "Color variant"
},
{
"name": "level",
"type": "2 | 3 | 4 | 5 | 6 | 1",
"required": false,
"defaultValue": "1",
"description": "Heading level (1-6)"
}
]
},
{
"name": "HexPatternBackground",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/HexPatternBackground.tsx",
"description": "A background with a hexagonal pattern",
"behaviour": "Fills its positioning parent and sits behind the content, like every\nbackground. It sets no size of its own, so an unpositioned parent leaves it\ncovering the viewport.",
"examples": [
"\n Content here
\n "
],
"props": [
{
"name": "backgroundColor",
"type": "string",
"required": false,
"defaultValue": "\"#00d9c4\"",
"description": "Background color (hex or rgb)"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Content to be rendered on top of the hexagon pattern background"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "hexColor",
"type": "string",
"required": false,
"defaultValue": "\"#08979c\"",
"description": "Hexagon stroke color (hex or rgb)"
},
{
"name": "patternSize",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Pattern size (affects hexagon scale)"
}
]
},
{
"name": "Icon",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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.\nIt used to render the name *as text*, so `",
"Custom filter:\n```tsx\n\n```"
],
"props": [
{
"name": "alt",
"type": "string",
"required": true,
"description": "Alt text for accessibility"
},
{
"name": "src",
"type": "string",
"required": true,
"description": "Image source URL"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "customFilter",
"type": "string",
"required": false,
"description": "Custom CSS filter value (overrides filter preset)"
},
{
"name": "filter",
"type": "ImageFilter",
"required": false,
"defaultValue": "\"none\"",
"description": "Apply CSS filter preset"
},
{
"name": "fit",
"type": "\"none\" | \"cover\" | \"contain\" | \"fill\"",
"required": false,
"defaultValue": "\"cover\"",
"description": "Object fit mode"
},
{
"name": "height",
"type": "string | number",
"required": false,
"description": "Height constraint"
},
{
"name": "overlay",
"type": "string",
"required": false,
"description": "Color overlay (CSS color value)"
},
{
"name": "overlayOpacity",
"type": "number",
"required": false,
"defaultValue": "0.5",
"description": "Opacity of the color overlay (0-1, default: 0.5)"
},
{
"name": "rounded",
"type": "\"none\" | \"sm\" | \"md\" | \"lg\" | \"full\"",
"required": false,
"defaultValue": "\"none\"",
"description": "Border radius"
},
{
"name": "shadow",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Add shadow"
},
{
"name": "width",
"type": "string | number",
"required": false,
"description": "Width constraint"
}
]
},
{
"name": "ImageBackground",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A full-bleed background image with content overlay",
"examples": [
"\n Bold Title \n Subtitle text here \n"
],
"props": [
{
"name": "src",
"type": "string",
"required": true,
"description": "Image source URL"
},
{
"name": "alt",
"type": "string",
"required": false,
"defaultValue": "\"\"",
"description": "Image alt text for accessibility"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "kenBurns",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Enable Ken Burns animation effect (slow zoom/pan)"
},
{
"name": "kenBurnsDuration",
"type": "number",
"required": false,
"defaultValue": "20",
"description": "Ken Burns animation duration in seconds"
},
{
"name": "overlay",
"type": "ImageBackgroundOverlay",
"required": false,
"defaultValue": "\"dark\"",
"description": "Overlay type for text readability"
},
{
"name": "overlayColor",
"type": "string",
"required": false,
"description": "Custom overlay color (CSS color value)"
},
{
"name": "position",
"type": "\"center\" | \"cover\" | \"contain\" | \"top\" | \"bottom\"",
"required": false,
"defaultValue": "\"cover\"",
"description": "Image positioning"
}
]
},
{
"name": "ImageSlide",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A full-bleed image slide with optional overlay",
"examples": [
"Welcome}\n overlayPosition=\"center\"\n/>"
],
"props": [
{
"name": "src",
"type": "string",
"required": true,
"description": "Image source URL"
},
{
"name": "alt",
"type": "string",
"required": false,
"defaultValue": "\"\"",
"description": "Image alt text"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "fit",
"type": "\"cover\" | \"contain\" | \"fill\"",
"required": false,
"defaultValue": "\"cover\"",
"description": "Object fit mode"
},
{
"name": "overlay",
"type": "ReactNode",
"required": false,
"description": "Overlay content"
},
{
"name": "overlayPosition",
"type": "\"center\" | \"top\" | \"bottom\"",
"required": false,
"defaultValue": "\"center\"",
"description": "Overlay position"
}
]
},
{
"name": "ImageSpotlight",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/ImageSpotlight.tsx",
"description": "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.",
"examples": [
"// Slide 1 - Overview (centered, no zoom)\n\n\n// Slide 2 - Zoom to top-left element\n\n\n// Slide 3 - Pan to bottom-right element\n"
],
"props": [
{
"name": "alt",
"type": "string",
"required": true,
"description": "Alt text for accessibility"
},
{
"name": "spotlightId",
"type": "string",
"required": true,
"description": "Unique identifier for cross-slide morphing - elements with same id will animate between slides"
},
{
"name": "src",
"type": "string",
"required": true,
"description": "Image source URL"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes for container"
},
{
"name": "duration",
"type": "number",
"required": false,
"defaultValue": "800",
"description": "Animation duration in ms, default 800"
},
{
"name": "easing",
"type": "\"linear\" | \"ease-out\" | \"ease-in-out\" | \"ease\" | \"ease-in\" | \"spring\"",
"required": false,
"defaultValue": "\"ease-in-out\"",
"description": "Animation easing function"
},
{
"name": "height",
"type": "string | number",
"required": false,
"defaultValue": "400",
"description": "Container height (CSS value or number in px)"
},
{
"name": "imageClassName",
"type": "string",
"required": false,
"description": "Additional CSS classes for image"
},
{
"name": "onAnimationComplete",
"type": "(() => void)",
"required": false,
"description": "Callback when animation completes"
},
{
"name": "overlay",
"type": "ReactNode",
"required": false,
"description": "Optional overlay content that appears on top"
},
{
"name": "rounded",
"type": "\"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"",
"required": false,
"defaultValue": "\"lg\"",
"description": "Border radius"
},
{
"name": "scale",
"type": "number",
"required": false,
"defaultValue": "1",
"description": "Scale/zoom level, default 1"
},
{
"name": "shadow",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Show shadow"
},
{
"name": "width",
"type": "string | number",
"required": false,
"defaultValue": "\"100%\"",
"description": "Container width (CSS value or number in px)"
},
{
"name": "x",
"type": "number",
"required": false,
"defaultValue": "50",
"description": "X position as percentage (0-100), default 50 (centered)"
},
{
"name": "y",
"type": "number",
"required": false,
"defaultValue": "50",
"description": "Y position as percentage (0-100), default 50 (centered)"
}
]
},
{
"name": "InfoCardWithIcon",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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.",
"examples": [
""
],
"props": [
{
"name": "logos",
"type": "Logo[]",
"required": true,
"description": "Array of logos. `src` is optional: an entry without one is set as a wordmark, so a row of product or company names needs no image files. Mixing the two is fine."
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "columns",
"type": "2 | 3 | 4 | 5 | 6",
"required": false,
"defaultValue": "3",
"description": "Number of columns"
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between logos"
}
]
},
{
"name": "MorphElement",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/SlideTransition.tsx",
"description": "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.",
"examples": [
"// Slide 1\n\n ![](\"product.jpg\")
\n \n\n// Slide 2 - same transitionName, different size\n\n \n "
],
"props": [
{
"name": "children",
"type": "ReactNode",
"required": true,
"description": "Element content"
},
{
"name": "transitionName",
"type": "string",
"required": true,
"description": "Unique name for cross-slide morphing"
},
{
"name": "as",
"type": "ElementType",
"required": false,
"defaultValue": "\"div\"",
"description": "HTML tag to render"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "style",
"type": "CSSProperties",
"required": false,
"description": "Additional inline styles"
}
]
},
{
"name": "ProcessFlowChart",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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\norder along `direction`, and `connections` only chooses which arrows appear\nbetween those fixed positions. A fan-in, a branch or a cycle will not lay out\n— use `Canvas` with `CanvasElement`, or an SVG placed with `Image`. Node size\nis 220×90 by default; the chart sizes itself to the nodes.",
"examples": [
"",
"// Vertical flow with custom styling\n"
],
"props": [
{
"name": "connections",
"type": "ProcessFlowConnection[]",
"required": true,
"description": "Which pairs of nodes get an arrow drawn between them. **This does not affect layout.** Nodes sit in a single line in array order, along the axis `direction` chooses; a connection draws a line between two of those fixed positions and can label it. `nodes` plus `connections` reads like a graph API and is not one — a fan-in, a branch or a cycle will render as a straight line with arrows doubling back along it. For those, use `Canvas` with `CanvasElement`, or draw an SVG and place it with `Image`."
},
{
"name": "nodes",
"type": "ProcessFlowNode[]",
"required": true,
"description": "Array of nodes with labels and colors. Laid out in the order given."
},
{
"name": "arrowStyle",
"type": "\"solid\" | \"dashed\"",
"required": false,
"defaultValue": "\"solid\"",
"description": "Arrow style for connections"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "direction",
"type": "\"horizontal\" | \"vertical\"",
"required": false,
"defaultValue": "\"horizontal\"",
"description": "Orientation of the flow"
},
{
"name": "nodeGap",
"type": "\"sm\" | \"md\" | \"lg\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between nodes"
},
{
"name": "nodeHeight",
"type": "number",
"required": false,
"defaultValue": "90",
"description": "Node height in pixels. Defaults to 90, for the same reason."
},
{
"name": "nodeWidth",
"type": "number",
"required": false,
"defaultValue": "220",
"description": "Node width in pixels. Defaults to 220. It was a hardcoded 120, which on the 1920×1080 canvas a deck actually renders at is a postage stamp."
}
]
},
{
"name": "ProfileCard",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A styled profile card component Displays a profile image, name, title, and associated company icons. Perfect for team introductions and speaker introductions.",
"examples": [
"\n \"Imagination is more important than knowledge.\"\n"
],
"props": [
{
"name": "author",
"type": "string",
"required": false,
"description": "Quote author"
},
{
"name": "authorStyle",
"type": "CSSProperties",
"required": false,
"description": "Custom style for the author/figcaption"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "source",
"type": "string",
"required": false,
"description": "Source or reference"
},
{
"name": "variant",
"type": "\"default\" | \"large\" | \"minimal\"",
"required": false,
"defaultValue": "\"default\"",
"description": "Visual variant"
}
]
},
{
"name": "Reveal",
"package": "@getnarro/shared-ui",
"description": "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\";",
"examples": [
"\n This appears first (after 400ms) \n \n\n This appears second (after 800ms) \n "
],
"props": []
},
{
"name": "ScrollableImage",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/ScrollableImage.tsx",
"description": "Displays a scrollable image Perfect for displaying full-page website screenshots that are too tall to fit in a slide.",
"examples": [
"// Basic scrollable image\n\n\n// With auto-scroll\n` with no margin, so spacing between blocks is\nyours to set — `className=\"mt-16\"` works. Size and weight are classes, so\n`className` overrides them.",
"examples": [
"\n This is styled body text for your slides.\n "
],
"props": [
{
"name": "align",
"type": "\"center\" | \"left\" | \"right\" | \"justify\"",
"required": false,
"defaultValue": "\"left\"",
"description": "Text alignment"
},
{
"name": "children",
"type": "ReactNode",
"required": false,
"description": "Children content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "color",
"type": "\"default\" | \"primary\" | \"muted\" | \"accent\"",
"required": false,
"defaultValue": "\"default\"",
"description": "Color variant"
},
{
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Text size"
},
{
"name": "weight",
"type": "\"medium\" | \"normal\" | \"semibold\" | \"bold\"",
"required": false,
"defaultValue": "\"normal\"",
"description": "Font weight"
}
]
},
{
"name": "ThreeColumn",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A three-column layout component",
"examples": [
"First column}\n second={Second column }\n third={"
],
"props": [
{
"name": "events",
"type": "TimelineEvent[]",
"required": true,
"description": "Array of event objects with year and label"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "lineColor",
"type": "string",
"required": false,
"defaultValue": "\"#14b8a6\"",
"description": "Color of the connecting line"
}
]
},
{
"name": "TitleSlide",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A centered title slide layout",
"examples": [
"` above it, or the columns\ntake the whole canvas *plus* the heading and overflow.",
"examples": [
"Left content}\n right={` for \"title on top, columns take the rest\": the column box then fills what the heading left, rather than the whole canvas plus the heading."
},
{
"name": "gap",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\"",
"required": false,
"defaultValue": "\"md\"",
"description": "Gap between columns"
},
{
"name": "ratio",
"type": "\"1:1\" | \"2:1\" | \"1:2\" | \"3:2\" | \"2:3\"",
"required": false,
"defaultValue": "\"1:1\"",
"description": "Column ratio"
}
]
},
{
"name": "TwoColumnHighlight",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "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.",
"examples": [
"Section Title}\n rightContent={Description text goes here }\n ratio=\"1:2\"\n/>",
"// With custom colors\n"
],
"props": [
{
"name": "leftContent",
"type": "ReactNode",
"required": true,
"description": "Content for the left column"
},
{
"name": "rightContent",
"type": "ReactNode",
"required": true,
"description": "Content for the right column"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "highlight",
"type": "string",
"required": false,
"description": "Text to highlight in the right column"
},
{
"name": "highlightColor",
"type": "string",
"required": false,
"defaultValue": "\"#ff6b35\"",
"description": "Highlight color for emphasized text"
},
{
"name": "leftBg",
"type": "string",
"required": false,
"defaultValue": "\"#000000\"",
"description": "Left column background color"
},
{
"name": "leftTextColor",
"type": "string",
"required": false,
"defaultValue": "\"#ffffff\"",
"description": "Left column text color"
},
{
"name": "ratio",
"type": "\"1:2\" | \"2:3\" | \"1:3\"",
"required": false,
"defaultValue": "\"1:2\"",
"description": "Column width ratio (left:right)"
},
{
"name": "rightBg",
"type": "string",
"required": false,
"defaultValue": "\"#ffffff\"",
"description": "Right column background color"
},
{
"name": "rightTextColor",
"type": "string",
"required": false,
"defaultValue": "\"#000000\"",
"description": "Right column text color"
}
]
},
{
"name": "TypewriterText",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/TypewriterText.tsx",
"description": "Text that appears character by character",
"behaviour": "Reserves no space for the text it has not typed yet, so the\nsurrounding layout shifts as it types. Give it a fixed-height parent when that\nmatters. The cursor is `1em` tall and part of the line box.",
"examples": [
"\n Hello, World!\n "
],
"props": [
{
"name": "children",
"type": "string",
"required": true,
"description": "Text content to animate"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "cursor",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Show blinking cursor"
},
{
"name": "delay",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "Delay before starting animation in milliseconds"
},
{
"name": "isActive",
"type": "boolean",
"required": false,
"description": "Override slide active state"
},
{
"name": "onComplete",
"type": "(() => void)",
"required": false,
"description": "Callback when animation completes"
},
{
"name": "speed",
"type": "number | \"slow\" | \"medium\" | \"fast\"",
"required": false,
"defaultValue": "\"medium\"",
"description": "Speed of typing in milliseconds per character"
}
]
},
{
"name": "Video",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/types/index.ts",
"description": "A video embedding component",
"examples": [
"\n This text will appear word by word\n "
],
"props": [
{
"name": "children",
"type": "string",
"required": true,
"description": "Text content to animate (will be split by words)"
},
{
"name": "animation",
"type": "WordRevealAnimation",
"required": false,
"defaultValue": "\"fade\"",
"description": "Animation type"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "delay",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "Delay before starting animation in milliseconds"
},
{
"name": "duration",
"type": "number",
"required": false,
"defaultValue": "300",
"description": "Animation duration per word in milliseconds"
},
{
"name": "isActive",
"type": "boolean",
"required": false,
"description": "Override slide active state"
},
{
"name": "onComplete",
"type": "(() => void)",
"required": false,
"description": "Callback when all words are revealed"
},
{
"name": "staggerDelay",
"type": "number",
"required": false,
"defaultValue": "100",
"description": "Delay between each word in milliseconds"
}
]
},
{
"name": "Workflow",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/Workflow.tsx",
"description": "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\nconnectors between them. The step circles are a fixed 48px regardless of the\ncanvas.",
"examples": [
"\n Begin here \n Do the work \n All done! \n "
],
"props": [
{
"name": "children",
"type": "ReactNode",
"required": true,
"description": "WorkflowStep children"
},
{
"name": "animation",
"type": "WorkflowAnimation",
"required": false,
"defaultValue": "\"progressive\"",
"description": "Animation type"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "connectorColor",
"type": "string",
"required": false,
"defaultValue": "\"var(--slide-muted, rgba(107, 114, 128, 0.4))\"",
"description": "Connector line color"
},
{
"name": "direction",
"type": "WorkflowDirection",
"required": false,
"defaultValue": "\"horizontal\"",
"description": "Layout direction"
},
{
"name": "highlightActive",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Highlight the currently active step"
},
{
"name": "isActive",
"type": "boolean",
"required": false,
"description": "Override slide active state"
},
{
"name": "showConnectors",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Show connecting lines/arrows between steps"
},
{
"name": "staggerDelay",
"type": "number",
"required": false,
"defaultValue": "500",
"description": "Delay between each step in milliseconds"
}
]
},
{
"name": "WorkflowStep",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/Workflow.tsx",
"description": "Individual step in a workflow",
"behaviour": "One step of a `Workflow`, with a fixed 48px marker. Used on its own it\nstill renders the marker and its own layout, but no connectors.",
"props": [
{
"name": "children",
"type": "ReactNode",
"required": true,
"description": "Step content"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "description",
"type": "string",
"required": false,
"description": "Step description"
},
{
"name": "icon",
"type": "ReactNode",
"required": false,
"description": "Icon or number to display"
},
{
"name": "title",
"type": "string",
"required": false,
"description": "Step title"
}
]
},
{
"name": "ZoomImage",
"package": "@getnarro/shared-ui",
"source": "packages/shared-ui/src/components/ZoomImage.tsx",
"description": "Image with click-to-zoom functionality",
"behaviour": "Takes its `height` when given one and its natural size otherwise, so a\nzoom inside a fixed-height parent needs an explicit height or it will grow the\nparent.",
"examples": [
""
],
"props": [
{
"name": "alt",
"type": "string",
"required": true,
"description": "Alt text for accessibility"
},
{
"name": "src",
"type": "string",
"required": true,
"description": "Image source URL"
},
{
"name": "className",
"type": "string",
"required": false,
"description": "Additional CSS classes"
},
{
"name": "fit",
"type": "\"none\" | \"cover\" | \"contain\" | \"fill\"",
"required": false,
"defaultValue": "\"contain\"",
"description": "Object fit mode"
},
{
"name": "height",
"type": "string | number",
"required": false,
"description": "Height constraint"
},
{
"name": "rounded",
"type": "\"none\" | \"sm\" | \"md\" | \"lg\" | \"full\"",
"required": false,
"defaultValue": "\"none\"",
"description": "Border radius"
},
{
"name": "shadow",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Add shadow"
},
{
"name": "width",
"type": "string | number",
"required": false,
"description": "Width constraint"
},
{
"name": "zoomable",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Enable click-to-zoom"
},
{
"name": "zoomScale",
"type": "number",
"required": false,
"defaultValue": "2",
"description": "Zoom scale factor"
}
]
}
]
}