UniboxIdlePanel

Guidelines#

Use it for the right-hand pane of the inbox when no conversation is selected. It steps aside the moment one opens.

What you provide: className only. Give it the pane's size; the panel centres itself and clips its glow (overflow-hidden).

Anatomy

• A size-[34rem] atmosphere in bg-primary/10 blur-3xl behind a size-[19rem] stage with two orbit guides (92px and 140px radius, border-foreground/[0.06]).
• Channel chips (size-8, border-border/70 bg-background/80 shadow-sm backdrop-blur-sm) ride the shared orbit keyframes: Mail in amber-500 and WhatsApp in emerald-500 on the inner ring (26s), LinkedIn in sky-500 on the outer ring (40s, reversed).
• Centre: a size-32 bg-primary/15 blur-2xl halo under a size-24 glass disc (bg-background/70 shadow-xl shadow-primary/10 backdrop-blur-xl) holding a size-9 text-primary/80 messages icon.
• Copy: "Your unified inbox" in text-xl font-semibold tracking-tight, a max-w-sm text-sm text-muted-foreground line, then a rounded-full pill with a pinging emerald-500 dot.

Motion: the atmosphere breathes (scale 1 to 1.12, opacity 0.5 to 0.8, 9s ease-in-out, looping), the halo pulses to 1.25 every 4.5s, and the pill text shimmers (animate-unibox-shimmer, 2.8s linear). With reduced motion, all of it stops and the orbiting chips are not rendered.

Don't use it as a loading or error state, and don't add actions to it. It exists so there is something calm to look at.

Facts#

Group	Unibox
Product	Max
Global	window.DigitalCrew.UniboxIdlePanel
Source	max-agent: src/features/unibox/ui/components/unibox-idle-panel.tsx
Import in the app	import { UniboxIdlePanel } from "@/features/unibox/ui/components/unibox-idle-panel";

API#

TypeScript declarations emitted from src/features/unibox/ui/components/unibox-idle-panel.tsx.

export declare function UniboxIdlePanel({ className }: {
    className?: string;
}): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h(DC.UniboxIdlePanel, { className: "h-[500px] rounded-2xl border border-border/60 bg-background" });
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Unibox#