---
sidebar_position: 1.1
sidebar_custom_props:
  section: "Setup"
  section_position: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Installation

:::tip[Already Included]
If you're using `@sp-days-framework/create-sp-days`, the Sykehuspartner Slidev Theme is already installed and configured. You can start creating presentations right away!
:::

Install the theme using your preferred package manager:

<Tabs>
  <TabItem value="npm" label="npm" default>
    ```bash
    npm install @sp-days-framework/slidev-theme-sykehuspartner
    ```
  </TabItem>
  <TabItem value="yarn" label="Yarn">
    ```bash
    yarn add @sp-days-framework/slidev-theme-sykehuspartner
    ```
  </TabItem>
</Tabs>

Configure the theme in your presentation's frontmatter:

```markdown title="slidev/presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
layout: cover
---

# My Presentation Title
## Subtitle Goes Here

---

# First Content Slide
Your content here...
```

The theme is now active and all 18 layouts are available.

## Configuration

### Basic Theme Setup

Configure the theme in your presentation's frontmatter:

```markdown title="slidev/presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
layout: cover
---

# My Presentation
## Subtitle
```

### Using with Docusaurus Plugin

When using with `@sp-days-framework/docusaurus-plugin-slidev`, set the theme globally or per-presentation:

**Global Theme:**

```js title="docusaurus.config.js"
module.exports = {
  plugins: [
    [
      "@sp-days-framework/docusaurus-plugin-slidev",
      {
        theme: "@sp-days-framework/slidev-theme-sykehuspartner",
      },
    ],
  ],
};
```

**Per-Presentation Override:**

```markdown title="slidev/my-presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
---
```

See the Slidev Integration plugin documentation for information about integrating presentations into Docusaurus.

### Running Development Server

Run Slidev to preview your presentation with hot-reload:

```bash
npm run slidev ./slidev/presentation.md
```