# AuthIllustration

> Isometric illustration of the three portals that reacts to the sign-in state with CSS transitions only.

Source: https://ui.jcsoftdev.com/docs/components/auth-illustration

Isometric illustration of the three portals that reacts to the sign-in state with CSS
transitions only. Colours come from the theme tokens (`--accent`, `--surface`, `--ink`), so dark
mode and every accent apply on their own. With reduced motion it rests assembled and still.

## Import

```ts
import { AuthIllustration } from "@jcsoftdev/ui/auth";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/auth/auth-illustration`.

## Usage

```tsx
<AuthIllustration state="idle" progress={0} activeIndex={0} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `look` | `AuthLook` | `Slabs` | The look, a component from its own entry (`Stack` from `@jcsoftdev/ui/auth/stack`, and so on). Defaults to `Slabs`; looks you do not pass stay out of your bundle. For a string `variant` use `AuthIllustrationAny` from `@jcsoftdev/ui/auth/looks`. |
| `state` | `"error" \| "typing" \| "success" \| "idle" \| "password"` |  | What the screen is doing. Inside an `AuthLayout` it follows the layout's state. |
| `progress` | `number` |  | Fill of the whole form, 0 to 1. Inside an `AuthLayout` it follows the layout's progress. |
| `activeIndex` | `number` |  | Index of the portal being used (0 to 2); that slab rises above the others. |
| `label` | `string` |  | Accessible name of the image. Without it the illustration is decorative and hidden from assistive technology. Ignored by text looks (`Statement`): their text is the content, so they are never an `img` and never hidden. |
| `headline` | `ReactNode` |  | Text looks (`Statement`) only: the headline (a string animates word by word). Defaults to the UI string `welcomeBack`. |
| `caption` | `ReactNode` |  | Text looks only: a supporting line under the headline. |
| `action` | `ReactNode` |  | Text looks only: content beside the arrow pill, such as a link. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Idle](/storybook/?path=/story/auth-authillustration--idle)
- [Typing Identifier](/storybook/?path=/story/auth-authillustration--typing-identifier)
- [Typing Password](/storybook/?path=/story/auth-authillustration--typing-password)
- [Failed](/storybook/?path=/story/auth-authillustration--failed)
- [Failed Settles](/storybook/?path=/story/auth-authillustration--failed-settles)
- [Success](/storybook/?path=/story/auth-authillustration--success)
- [Family Portal](/storybook/?path=/story/auth-authillustration--family-portal)
- [Labelled](/storybook/?path=/story/auth-authillustration--labelled)
- [States](/storybook/?path=/story/auth-authillustration--states)
- [Reduced Motion Keeps State](/storybook/?path=/story/auth-authillustration--reduced-motion-keeps-state)
- [Error Settles Without Hop](/storybook/?path=/story/auth-authillustration--error-settles-without-hop)
- [Pointer Follows Settings](/storybook/?path=/story/auth-authillustration--pointer-follows-settings)

## Source

`packages/ui/src/auth/auth-illustration/auth-illustration.tsx`