> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ploterr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a stair

> Connect two levels with a stair that has equal risers.

export const LiveExample = ({path, title = 'Live example', height = 460}) => {
  return <Frame>
      <iframe src={`https://floorkit-examples.ploterr.com/floorkit/${path}?embed=1`} ref={frame => {
    if (!frame || !['localhost', '127.0.0.1'].includes(window.location.hostname)) return;
    const local = `http://localhost:5555/${path}?embed=1`;
    if (frame.src !== local) frame.src = local;
  }} title={title} loading="lazy" allow="fullscreen" style={{
    width: '100%',
    height: `${height}px`,
    border: 0,
    display: 'block'
  }} />
    </Frame>;
};

You give the start point, the direction and the width of a stair. Floorkit calculates the number of steps from the storey height and makes each step the same.

<LiveExample path="guides/add-a-stair" />

## Before you start

You have a session from [Start a building](/floorkit/guides/start-a-building).

## Write the stair

This straight stair starts at `[1, 1]` and is 1 metre wide. It climbs the full storey height.

```typescript theme={null}
import { StairLayout, type BmStair, type BuildingSession } from '@opengeometry/floorkit';

export const mainStair: BmStair = {
  id: 'main-stair',
  layout: StairLayout.STRAIGHT,
  origin: [1, 1],
  rotation: 0,
  baseOffset: 0,
  width: 1,
  treadDepth: 0.28,
};
```

## Add it to the storey

A stair is an entry in the `stairs` list of the storey where it starts.

```typescript theme={null}
export function addStair(session: BuildingSession): void {
  session.apply(
    {
      kind: 'add-element',
      buildingId: 'building',
      storeyId: 'ground',
      list: 'stairs',
      element: mainStair,
    },
    session.revision,
  );
}
```

The `add-element` command adds the stair to the list, and the session builds it. You keep the session and its undo history. The command rejects an id that the list has.

## Layouts

| `layout` | Shape |
| - | - |
| `StairLayout.STRAIGHT` | One flight |
| `StairLayout.L_SHAPE` | Two flights with a quarter turn |
| `StairLayout.U_SHAPE` | Two flights with a half turn |

For an L or a U layout, `turnDirection` sets the turn (`'left'` or `'right'`) and `landingDepth` sets the depth of the landing.

## Rules

* `origin` is `[x, z]` in metres. It is the start of the walking line of the first flight.
* `rotation` is in degrees, counter-clockwise when you look from above.
* `totalRise` is the height that the stair climbs. The default is the storey height.
* `treadDepth` is the depth of one step. The default is 0.28 metres.
* Floorkit keeps each riser at `maxRiserHeight` or less. The default is 0.19 metres.

<Note>
  Floorkit makes the geometry of a stair. Check the stair against your local building code.
</Note>

## Next

<CardGroup cols={2}>
  <Card title="Add a column" icon="building-columns" href="/floorkit/guides/add-a-column">
    Add the structure.
  </Card>

  <Card title="Stair API" icon="code" href="/floorkit/api/architecture/stair">
    See each option of a stair.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.