Skip to content
Docked panel

Carbon

A docked side panel that never covers your content.

Northwind SupplyAI assistant
Do you ship to Germany?09:41
Yes — standard delivery is 3–5 working days, and free over €60.09:41

Live preview · real tokens, not a screenshot

When to pick it

Opens as a column against the edge of the viewport and pushes nothing. Right for documentation and apps where the visitor needs to read the page and the answer at the same time — a corner bubble covers exactly the content they are asking about.

How it is built

Fixed to the inline edge at 100dvh with its own scroll container. On viewports under 640px it falls back to the sheet layout automatically, because a 380px panel on a 360px phone is a full-screen panel with extra steps.

Accessibility

Focus is trapped while open and returns to the launcher on close. The panel is a labelled dialog, not a div.

Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.

Good fit for

  • Documentation
  • Web apps
  • Dashboards
  • Knowledge bases

Source code

Take Carbon anywhere.

You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.

Seven designs ship their source to everyone, no account needed.

Other docked panel designs

Put it on your site
before you finish your coffee.

A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.