> This page is for Docs.

> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

## Scroll-synced code walkthroughs

components

You can build scroll-synced code walkthroughs with the new `<ScrollWalkthrough>` component. Prose steps flow down the page while a code panel stays pinned beside them, following the reader's scroll position. Use this component for quickstarts and integration guides where successive steps add to the same few files.

#### Install the SDK

Add the Plant Store SDK to your project.

**`Terminal (line 1)`**

```bash Terminal (line 1)
npm install @plantstore/sdk
```

#### Create the client

Point the client at your garden with an API key.

Import the client.

**`garden.ts (line 1)`**

```ts garden.ts (line 1)
import { PlantStore } from "@plantstore/sdk";
```

Construct it with your API key.

**`garden.ts (lines 3-5)`**

```ts garden.ts (lines 3-5)
const client = new PlantStore({
  apiKey: process.env.PLANT_API_KEY,
});
```

#### Add a plant

Create your first plant record. The `wateringDays` interval drives care reminders.

**`garden.ts (lines 7-11)`**

```ts garden.ts (lines 7-11)
await client.plants.create({
  name: "Monstera deliciosa",
  light: "bright-indirect",
  wateringDays: 7,
});
```

#### Complete files

**`Terminal`**

```bash Terminal
npm install @plantstore/sdk
```

**`garden.ts`**

```ts garden.ts
import { PlantStore } from "@plantstore/sdk";

const client = new PlantStore({
  apiKey: process.env.PLANT_API_KEY,
});

await client.plants.create({
  name: "Monstera deliciosa",
  light: "bright-indirect",
  wateringDays: 7,
});
```

Read the docs