Side panel
The Flo panel's frame: docked on the right, the page still working beside it. Its body slides in over 200ms, out over 150ms, and the edge resizes it.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { SidePanel } from '@/ui/side-panel';<SidePanel title="Shortlist for Northwind" />Default
Docked on the right at 420px, between 360px and half the window. The page beside it stays usable, so a change Flo makes there is seen as it happens. Replay closes it the way Esc and Close do (the body slides out, then the panel goes) and opens it again. Drag its start edge, or focus the edge and use the arrow keys, to resize it.
import { PencilSimpleLineIcon } from '@phosphor-icons/react';
import { useRef, useState } from 'react';
import { Button, IconButton } from '@/ui/button';
import { SidePanel } from '@/ui/side-panel';
export default function SidePanelDefault() {
const [open, setOpen] = useState(true);
const frame = useRef<HTMLDivElement>(null);
// Close the way Esc and × do, so the body slides out before the panel goes.
const close = () => frame.current?.querySelector<HTMLElement>('[data-slot="side-panel-close"]')?.click();
return (
<div ref={frame} className="flex h-80 w-full overflow-hidden rounded-large border border-border bg-surface">
<main className="flex flex-1 flex-col items-start gap-100 p-300 text-body leading-body text-text-subtle">
Jobs · Northwind
<Button data-replay onClick={() => (open ? close() : setOpen(true))}>
{open ? 'Close Flo' : 'Ask Flo'}
</Button>
</main>
<SidePanel
open={open}
onOpenChange={setOpen}
title="Shortlist for Northwind"
label="Flo"
actions={
<IconButton label="New chat" size="sm">
<PencilSimpleLineIcon aria-hidden />
</IconButton>
}
>
<p className="p-200 text-body leading-body text-text">Three people are waiting on a reply this week.</p>
</SidePanel>
</div>
);
}Settings navigation
In Settings the sidebar becomes the settings list: Back to app, a search box, then Your account and Agency. Typing swaps the groups for matching pages and settings.
Sidebar
The workspace navigation: 200px, folding to a 52px icon rail. Only its edge moves, and labels fade before the edge reaches them.