# components/HowItWorks (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/HowItWorks.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/HowItWorks.tsx).

## Components

### `HowItWorks`

Component.

Renders a tutorial: a scene beside numbered steps, played in turn when the scene takes the step.

```ts
function HowItWorks(props: HowItWorksProps): Element
```

**Parameters**

- `props` (`HowItWorksProps`): Component props.

**Returns** `Element`

**Props**

- `actions?` (`ReactNode`): Buttons or links that act on what the tutorial explains, such as "Build an extension".
- `className?` (`string`): Extra classes on the block.
- `illustration` (`ReactNode | ((step: number) => ReactNode)`): A decorative scene of the steps at work, with nothing to click. A function of the step on show
  (from 0) makes a tour: the steps play in turn, and a click on a step shows it.
- `steps` (`readonly HowItWorksStep[]`): The steps, in order. Two to four read best.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `surface?` (`'tray' | 'raised'`, default `'tray'`): The block's surface: `tray` sits into the page (a settings page), `raised`
  lifts it off a bare panel so it stands out there.
- `title` (`ReactNode`): The tutorial's heading, such as "How skills work".

Source: [ui/src/components/HowItWorks.tsx:53](https://github.com/Tahul/zidane/blob/main/ui/src/components/HowItWorks.tsx#L53)

## Interfaces

### `HowItWorksProps`

Interface.

Props for [`HowItWorks`](https://zidane.si/docs/reference/ui-components-how-it-works.md#HowItWorks).

```ts
interface HowItWorksProps
```

**Properties**

- `actions?` (`ReactNode`): Buttons or links that act on what the tutorial explains, such as "Build an extension".
- `className?` (`string`): Extra classes on the block.
- `illustration` (`ReactNode | ((step: number) => ReactNode)`): A decorative scene of the steps at work, with nothing to click. A function of the step on show
  (from 0) makes a tour: the steps play in turn, and a click on a step shows it.
- `steps` (`readonly HowItWorksStep[]`): The steps, in order. Two to four read best.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `surface?` (`'tray' | 'raised'`, default `'tray'`): The block's surface: `tray` sits into the page (a settings page), `raised`
  lifts it off a bare panel so it stands out there.
- `title` (`ReactNode`): The tutorial's heading, such as "How skills work".

Source: [ui/src/components/HowItWorks.tsx:23](https://github.com/Tahul/zidane/blob/main/ui/src/components/HowItWorks.tsx#L23)

### `HowItWorksStep`

Interface.

One step of a [`HowItWorks`](https://zidane.si/docs/reference/ui-components-how-it-works.md#HowItWorks).

```ts
interface HowItWorksStep
```

**Properties**

- `detail?` (`ReactNode`): One or two sentences more.
- `title` (`ReactNode`): What happens, in a few words.

Source: [ui/src/components/HowItWorks.tsx:15](https://github.com/Tahul/zidane/blob/main/ui/src/components/HowItWorks.tsx#L15)