A resizable split-panel layout whose divider magnetically leans toward configured snap points and can be collapsed, used for sidebars, IDE-style layouts, and mail-client panes.
"use client";
import {
SnapPanel,
SnapPanelGroup,
SnapPanelHandle,
} from "@/components/ui/snap-panels";
import { ChevronDown, ChevronRight, FileCode2 } from "lucide-react";
import { cn } from "@/lib/utils";
const TREE = [
{ name: "app", depth: 0, folder: true },
{ name: "layout.tsx", depth: 1, folder: false },
{ name: "page.tsx", depth: 1, folder: false },
{ name: "lib", depth: 0, folder: true },
{ name: "springs.ts", depth: 1, folder: false },
{ name: "utils.ts", depth: 1, folder: false },
];
const CODE = [
"export const spring = {",
" fast: { duration: 0.08, bounce: 0 },",
" quick: { duration: 0.14, bounce: 0.1 },",
" moderate: { duration: 0.2, bounce: 0.12 },",
"};",
];
const LOG = [
"$ bun run build",
"▲ Next.js 16.2.12",
" compiled successfully in 1.4s",
" ○ /docs/components/snap-panels",
];
export default function SnapPanelsIdeExample() {
return (
<div className="h-80 w-full max-w-2xl overflow-hidden rounded-lg border border-border bg-card">
<SnapPanelGroup direction="horizontal">
<SnapPanel
id="files"
defaultSize="200px"
minSize="160px"
snapPoints={["200px", "280px"]}
collapsible
>
<div className="flex h-full flex-col gap-px bg-background p-1.5">
{TREE.map((entry) => (
<span
key={entry.name}
style={{ paddingInlineStart: `${entry.depth * 12 + 8}px` }}
className={cn(
"flex items-center gap-1.5 truncate rounded-md py-1 pe-2 font-mono text-2xs",
entry.name === "springs.ts"
? "bg-active text-foreground"
: "text-muted-foreground",
)}
>
{entry.folder ? (
<ChevronDown className="size-3 shrink-0 opacity-60" />
) : (
<FileCode2 className="size-3 shrink-0 opacity-60" />
)}
{entry.name}
</span>
))}
</div>
</SnapPanel>
<SnapPanelHandle aria-label="Resize file tree" />
<SnapPanel id="main" minSize={30}>
<SnapPanelGroup direction="vertical">
<SnapPanel id="editor" minSize={20}>
<div className="flex h-full flex-col">
<div className="flex h-9 shrink-0 items-center gap-2 border-b border-border px-3">
<FileCode2 className="size-3 shrink-0 text-muted-foreground" />
<span className="truncate font-mono text-2xs text-foreground">
springs.ts
</span>
<span className="text-muted-foreground/60">/</span>
<span className="truncate font-mono text-2xs text-muted-foreground">
utils.ts
</span>
</div>
<div className="flex flex-col p-3">
{CODE.map((line) => (
<span
key={line}
className="truncate whitespace-pre font-mono text-2xs leading-5 text-muted-foreground"
>
{line}
</span>
))}
</div>
</div>
</SnapPanel>
<SnapPanelHandle aria-label="Resize terminal" />
<SnapPanel
id="terminal"
defaultSize={30}
minSize={12}
snapPoints={[30, 60]}
collapsible
>
<div className="flex h-full flex-col bg-background">
<div className="flex h-8 shrink-0 items-center gap-1.5 px-3">
<ChevronRight className="size-3 shrink-0 text-muted-foreground" />
<span className="text-label text-muted-foreground uppercase">
Terminal
</span>
</div>
<div className="flex flex-col px-3">
{LOG.map((line) => (
<span
key={line}
className="truncate whitespace-pre font-mono text-2xs leading-5 text-muted-foreground"
>
{line}
</span>
))}
</div>
</div>
</SnapPanel>
</SnapPanelGroup>
</SnapPanel>
</SnapPanelGroup>
</div>
);
}
