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

# FirstflowWidget

> The default widget shell renders the active step's blocks, can anchor above a chat composer, and supports minimize.

`FirstflowWidget` is the drop-in shell that renders whatever experience is active. It reads runtime state from the provider, so it takes no experience props just placement options. Render it once, anywhere inside `FirstflowProvider`.

```tsx theme={null}
import "@firstflow/runtime/styles.css";
import { FirstflowWidget } from "@firstflow/runtime";

<FirstflowWidget />
```

When no experience is active it renders nothing (or an empty mount slot in anchored mode).

## Props

<ParamField path="defaultMinimized" type="boolean" default="false">
  Start in the collapsed (resting) state. A newly-started experience always
  opens expanded regardless, so a minimize from a previous run never hides the
  next one.
</ParamField>

<ParamField path="alignWithNextComposerSibling" type="boolean" default="false">
  Anchor the widget above the next DOM sibling of the mount and inherit its
  top-left border radius as horizontal inset. Place the widget element directly
  before your chat composer.
</ParamField>

<ParamField path="alignWith" type="RefObject<HTMLElement>">
  Anchor above a specific element by ref, using the same border-radius inset.
  Takes precedence over `alignWithNextComposerSibling`.
</ParamField>

## Placement

By default the widget floats bottom-right. In **anchored** mode it grows upward from a zero-height mount slot useful for embedding above a chat input:

```tsx theme={null}
<div style={{ position: "relative" }}>
  <FirstflowWidget alignWithNextComposerSibling />
  <YourComposer />
</div>
```

## Minimize

The shell has a minimize toggle, and the [`minimize` action](#minimize-as-an-action) can collapse it from inside a step. Minimizing keeps the experience alive on its current step (unlike dismiss, which ends it). Re-expand from the header.

### Minimize as an action

A CTA or option can run a `minimize` action. It is **non-terminal** it collapses the widget without advancing or ending the run:

```json theme={null}
{ "label": "Remind me later", "actions": [{ "type": "minimize" }] }
```

See the action model in [`SCHEMA.md`](https://github.com/firstflowdev/firstflow-oss/blob/main/packages/config-schema/SCHEMA.md).

## Custom shell

If you need different markup, skip `FirstflowWidget` and render `BlockRenderer` inside your own panel driven by [`useFirstflow`](/react/use-firstflow). See [Blocks & custom shells](/widget-kit/overview).

## Next

Drive the runtime with [useFirstflow](/react/use-firstflow), or restyle the default shell in [Theming](/react/theming).