# 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

<FeatureGrid cols={3}>
  <FeatureCard icon="▦" title="Grid" description=":::grid{cols=3} · <Grid cols={3}>" href="/grid" />
  <FeatureCard icon="🃏" title="Card" description=":::card · <Card title>" href="/card" />
  <FeatureCard icon="▥" title="Columns" description=":::col :::left :::right · <Columns ratio>" href="/columns" />
  <FeatureCard icon="🖼️" title="Image" description="::image{src alt fit} · <Image>" href="/image" />
  <FeatureCard icon="🎞️" title="Media" description="<Media src caption type>" href="/media" />
</FeatureGrid>

## Content

<FeatureGrid cols={3}>
  <FeatureCard icon="🎬" title="Cover" description="<Cover title subtitle author>" href="/cover" />
  <FeatureCard icon="•" title="Points" description="<Points title items ordered>" href="/points" />
  <FeatureCard icon="💡" title="Callout" description=":::callout{type title} · <Callout>" href="/callout" />
  <FeatureCard icon="🏷️" title="Badge & Kbd" description=":badge[…] :kbd[…] · <Badge> <Kbd>" href="/badge-and-kbd" />
  <FeatureCard icon="❝" title="Quote" description="> quote — author · <Quote>" href="/quote" />
  <FeatureCard icon="⌨️" title="Code" description="Shiki, :::code-group · <CodeBlock> <CodeGroup>" href="/code" />
</FeatureGrid>

## Interactive and extending

<FeatureGrid cols={3}>
  <FeatureCard icon="👣" title="Step" description=":::step · <Step index>" href="/step" />
  <FeatureCard icon="🔀" title="Mermaid" description="```mermaid · <Mermaid chart>" href="/mermaid" />
  <FeatureCard icon="🧩" title="Custom components" description="Your own React components in any story." href="/custom-components" />
</FeatureGrid>

## In other formats

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

<FormatSupport />

Writing guides, configuration and the CLI live on [docs.recit.dev](https://docs.recit.dev). Full example decks
are on [presentation.recit.dev](https://presentation.recit.dev).