The last post covered Tooltip — content that stays exactly where you write it, just revealed on hover. This one is the opposite: content that moves somewhere else entirely.
What it does#
A doc page's right rail usually holds the table of contents — the auto-generated list of headings a reader uses to jump around. Panel replaces it. Anything inside <Panel>...</Panel> moves out of the article column and into that rail instead, in place of the TOC:
<Panel>
<Icon icon="lock" size={14} /> Works on the Team plan and above.
Need the full list of what's included? See [pricing](/pricing).
</Panel>Use it for a short cheat sheet, a related-links list, or a plan note — anything a reader should see alongside the prose the whole time they're on the page, rather than interrupting the prose to read it once.
The honest part: this post can't show you the real effect#
Here's the thing about Panel that makes it different from every other component in this series: it only does its actual job — replacing the TOC — on a doc page that has a TOC rail to replace. This blog post doesn't have one. So the <Panel> above didn't move anywhere; it rendered as a plain boxed aside, right where it's written, same as a Callout.
That's not a bug I'm papering over — it's the deliberate fallback. A doc site's homepage (the card-grid layout) and its help-center-style pages don't have a TOC rail either, and the alternative to a fallback was silently deleting whatever an author put inside <Panel> on those pages. A docs component that can eat your content because of which layout you happened to pick is worse than one that just renders in place when it can't do the fancy thing. So: on the one layout with a rail (the plain article page most docs sites actually use), Panel replaces the TOC. Everywhere else — including right here — it degrades to an inline box instead of disappearing.
What this doesn't do#
Panel takes no props — just content. It's deliberately the simplest shape in this series: no title, no variant, nothing to configure. If you want a labeled note inside it, write one with a normal heading or a Callout.
That brings Dokly to 23 top-level MDX components, up from 11 a few months ago. Panel was the last named gap from the original competitor audit — Columns, Frames, Update, Icon, Fields, Tree, Tooltips, and now Panel are all shipped. Mintlify still has more (~25+), but the specific list we set out to close is closed.
If you want a case Panel doesn't cover, reply to this post or use the contact page — it reaches me directly.
Changelog entries#
Panel component · Added · A block that replaces the page's table of contents in the side rail on docs pages that have one, and renders in place elsewhere.