Copy page

Extending

Custom components

Any React component can be used in a story. Declare a module in the configuration:

recit.config.ts
export default defineConfig({ components: "./components/index.tsx" });

components/index.tsx
import { useState } from "react";

export const Counter = ({ start = 0 }: { start?: number }) => {
  const [count, setCount] = useState(start);
  return (
    <button onClick={() => setCount((c) => c + 1)}>Clicks: {count}</button>
  );
};

In a site, pass the same module in the publish section of recit.config.ts:

recit.config.ts
import { defineConfig } from "recit/config";
import * as components from "./components/index.js";

export default defineConfig({
  navigation: [],
  publish: { routePrefix: "/present", layout: "none", components },
});

Live demo

Syntax

Markdown
:::component{name=Metric value="98 %" label="Lorem ipsum" trend="+2 pts"}
:::

MDX
<Counter start={1} />

Attributes and props

React is provided by the engine. Style a component with a CSS module next to it (Counter.module.css, imported as classes), or with the stylesheet of theme.customCss: utility classes are not compiled.

In other formats

Format	Status	Notes
deck	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
docs	Available	Through <StoryEmbed slug="…" /> in any page of a site.
motion	Available	Animated block in a film.
report	Planned · P6	Section of a paged report.
toon	Planned · P7	Panel of a vertical strip.
book	Planned · P8	Block of a printable chapter.