Addon functionality outside Panels, Storybook Toolbar or Tabs

[Lighttree]

Summary

Hello!

I'm working on a rather complex addon, and for some features I need some kind of "shared functionality" that shows all the time, regardless of the selected panel.

At the moment, I see 3 options:

• Tab. This is just not what I need; it should be shown in a normal Storybook screen (actually, I have all tabs disabled)
• Storybook toolbar. There is just not enough space already. I have many custom tools, and showing even more info there just won't work well from a UX perspective. Probably creating some tool that hacks the SB toolbar markup and changes it is an option.
• Panel. This is what I use at the moment, but the problem is that the functionality is related to multiple features from different panels. I might render the required UI in a panel, but position it on the opposite side of Storybook or below the Storybook toolbar. It is technically possible, I guess, but kinda "hacky".

There is also an option to make a global decorator. But this is a preview part. I can provide all the data to preview, but this affects the actual preview markup, rendered in the preview iFrame and just looks as incorrect way for the purpose.

Ideally, I want to either:

• add a "custom" top-level toolbar, under Storybook toolbar, or at the bottom (something like usually done in code editors)
• any UI somewhere in storybook-preview-wrapper not inside the preview iframe

Maybe you have any reccomendations what I should do?

---

UPD

Actually, the standard Tool pattern, combined with React createPortal, solves my question.

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @Lighttree! I'm Dosu and I’m helping the storybook team.

Storybook only officially supports persistent addon UI in Panels, the Toolbar, or Tabs—there’s no documented API or extension point for rendering addon UI elsewhere in the manager UI, such as under the toolbar or in the storybook-preview-wrapper outside the preview iframe. All official addon guides and code examples focus on these three areas, and global decorators only affect the preview iframe, not the manager UI itself (docs reference).

Injecting custom UI into other parts of the Storybook manager (like mounting a persistent bar under the toolbar) would require direct DOM manipulation or patching Storybook’s internal components. This approach is not supported, may break with Storybook upgrades, and is generally considered risky.

If you need always-visible UI, the best practice is to maximize what you can do in the toolbar (with dropdowns, popovers, or compact controls) or in a panel. If that’s not workable, you could experiment with DOM injection, but be aware it’s hacky and unsupported.

If Storybook adds more flexible extension points in the future, it will likely be documented in the official addon docs. For now, the supported options are limited to Panels, Toolbar, and Tabs (docs reference).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}