Components

The building blocks of every Récit story. Each component has a Markdown directive form (works in .md and .mdx) and a JSX form (.mdx only, no import needed). They ship in the @recit/components package and are rendered by the deck format today.

Every page below shows the component live, in a small deck you can drive with the arrow keys.

Layout

▦

Grid

:::grid{cols=3} · <Grid cols={3}>

Learn more→
🃏

Card

:::card · <Card title>

Learn more→
▥

Columns

:::col :::left :::right · <Columns ratio>

Learn more→
🖼️

Image

::image{src alt fit} · <Image>

Learn more→
🎞️

Media

<Media src caption type>

Learn more→

Content

🎬

Cover

<Cover title subtitle author>

Learn more→
•

Points

<Points title items ordered>

Learn more→
💡

Callout

:::callout{type title} · <Callout>

Learn more→
🏷️

Badge & Kbd

:badge[…] :kbd[…] · <Badge> <Kbd>

Learn more→
❝

Quote

> quote — author · <Quote>

Learn more→
⌨️

Code

Shiki, :::code-group · <CodeBlock> <CodeGroup>

Learn more→

Interactive and extending

👣

Step

:::step · <Step index>

Learn more→
🔀

Mermaid

```mermaid · <Mermaid chart>

Learn more→
🧩

Custom components

Your own React components in any story.

Learn more→

In other formats

Components are written once and rendered by every format that supports them.

FormatStatusNotes
deckAvailableRendered in slides, the presenter console and the HTML and PDF exports.
docsAvailableThrough <StoryEmbed slug="…" /> in any page of a site.
motionAvailableAnimated block in a film.
reportPlanned · P6Section of a paged report.
toonPlanned · P7Panel of a vertical strip.
bookPlanned · P8Block of a printable chapter.

Writing guides, configuration and the CLI live on docs.recit.dev. Full example decks are on presentation.recit.dev.

Last modified on