Skip to content
Docked panel

Slate Panel

Light docked panel with a soft blue accent.

NNorthwind 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

Carbon's light twin, for products that are themselves light. The same no-overlap argument applies — this is the layout to pick when the answer and the page have to be read together.

How it is built

The left edge carries a 1px hairline plus a 24px shadow falloff, which separates panel from page without a scrim. A scrim would imply the page behind is disabled, and it is not.

Accessibility

14.7:1. Dismissable with Escape, and the launcher regains focus.

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

  • SaaS dashboards
  • Light web apps
  • Help centres

Source code

Take Slate Panel 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.