# Showcase

The engine showcase: every layout, every directive and a full configuration (colors, radius, heading
font, three-zone footer with logo, custom CSS and the `Metric` component).

<ExampleHeader folder="deck-showcase" demo="showcase" file="slides.md" level="Intermediate" features={["Every layout", "recit.config.ts", "Footer & logo", "Custom component", "Tabbed code", "KaTeX", "Steps"]} />

## The demo

<StoryEmbed slug="showcase" />

## Try it

1. Change `theme.colors.primary` in `recit.config.ts`: the whole deck follows.
2. Set `footer.hideOn` to `[]` to show the footer on the cover.
3. Add `:::component{name=Metric value="42" label="Lorem"}` to a slide.

## Source code

<SourceFile deck="showcase" title="examples/deck-showcase/slides.md" language="md" />

## Configuration

<SourceFile deck="showcase" part="config" title="examples/deck-showcase/recit.config.ts" language="ts" />