Expandable Dialog
Responsive dialog that can expand and shrink
"use client";
import { Maximize2Icon, Minimize2Icon, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogBackdrop,
DialogClose,
DialogHeader,
DialogPopup,
DialogPortal,
DialogTitle,
DialogTrigger,
DialogViewport,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
export function ExpandableDialog() {
const [open, setOpen] = React.useState(false);
const [isExpanded, setIsExpanded] = React.useState(false);
return (
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger render={<Button variant="glow">Open Dialog</Button>} />
<AnimatePresence>
{open && (
<DialogPortal keepMounted>
<DialogBackdrop />
<DialogViewport className="fixed inset-0 flex items-center justify-center p-4 sm:p-6">
<DialogPopup
render={
<motion.div
animate={{
height: isExpanded ? "75vh" : "50vh",
maxWidth: isExpanded ? "56rem" : "40rem",
opacity: 1,
scale: 1,
}}
className="relative flex flex-col overflow-hidden rounded-md border bg-background shadow-lg"
exit={{ opacity: 0, scale: 0.95 }}
initial={{
height: "50vh",
maxWidth: "40rem",
opacity: 0,
scale: 0.95,
}}
layout
style={{
maxHeight: "90dvh",
width: "95vw",
}}
transition={{
bounce: 0,
damping: 30,
duration: 0.3,
stiffness: 300,
type: "spring",
}}
>
<DialogHeader className="flex flex-row items-center justify-between border-b p-2 sm:p-4">
<DialogTitle>Expandable Dialog</DialogTitle>
<div className="flex items-center gap-2">
<Button
onClick={() => setIsExpanded(!isExpanded)}
size="icon-sm"
title={isExpanded ? "Collapse" : "Expand"}
variant="ghost"
>
{isExpanded ? (
<Minimize2Icon className="size-4" />
) : (
<Maximize2Icon className="size-4" />
)}
<span className="sr-only">Toggle expand</span>
</Button>
<DialogClose
render={
<Button size="icon-sm" variant="ghost">
<X className="size-4" />
<span className="sr-only">Close dialog</span>
</Button>
}
title="Close"
/>
</div>
</DialogHeader>
<ScrollArea className="pr-1 min-h-0" gradientScrollFade>
<div className="space-y-4 p-2 sm:p-4">
{Array.from({ length: 30 }).map((_, i) => (
<div
className="flex items-center gap-4 rounded-md border border-border/50 h-26 bg-card p-3"
key={i}
>
<div className="h-10 w-10 shrink-0 rounded-full bg-muted" />
<div className="space-y-4">
<div className="h-6 w-24 sm:w-48 bg-muted rounded-md" />
<div className="h-6 w-32 sm:w-72 bg-muted rounded-md" />
</div>
</div>
))}
</div>
</ScrollArea>
</motion.div>
}
/>
</DialogViewport>
</DialogPortal>
)}
</AnimatePresence>
</Dialog>
);
}
Morphing Dialog
A fluid card-to-modal transition pattern. Combines Base UI's accessible dialog primitives with Framer Motion's shared layout animations for a seamless expansion effect. Inspired by Linear.
"use client";
import type { DialogRootActions } from "@base-ui/react/dialog";
import { PlusIcon, X } from "lucide-react";
import { AnimatePresence, LayoutGroup, motion } from "motion/react";
import { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogBackdrop,
DialogClose,
DialogPopup,
DialogPortal,
DialogTitle,
DialogViewport,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
export function MorphingDialog() {
const [isOpen, setIsOpen] = useState(false);
const [activeItem, setActiveItem] = useState<(typeof ITEMS)[0] | null>(null);
const actionsRef = useRef<DialogRootActions>({
close: () => {},
unmount: () => {},
});
const handleOpen = (item: (typeof ITEMS)[0]) => {
setActiveItem(item);
setIsOpen(true);
};
const handleClose = (open: boolean) => {
setIsOpen(open);
};
return (
<div>
<LayoutGroup>
<ScrollArea
className="w-screen whitespace-nowrap container"
noScrollBar
>
<div className="flex gap-2 md:gap-6 lg:gap-10 mx-auto">
{ITEMS.map((item) => (
<motion.button
className="relative group flex flex-col cursor-pointer bg-muted hover:bg-muted/80 transition-colors flex-1 size-64 lg:size-80 rounded focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10"
key={item.id}
layoutId={`card-container-${item.id}`}
onClick={() => handleOpen(item)}
style={{
opacity: activeItem?.id === item.id && isOpen ? 0 : 1,
pointerEvents:
activeItem?.id === item.id && isOpen ? "none" : "auto",
}}
>
<div className="relative h-48 w-full overflow-hidden rounded rounded-b-none">
<motion.div
className="w-full h-full"
layoutId={`image-container-${item.id}`}
>
<img
alt={item.title}
className="h-full w-full object-cover dark:brightness-20 dark:grayscale-25"
height={500}
src={item.image}
width={500}
/>
</motion.div>
</div>
<div className="flex flex-1 p-4 justify-between items-center rounded rounded-t-none">
<motion.h3
className="text-lg font-semibold"
layoutId={`title-${item.id}`}
transition={{ duration: 0.2 }}
>
{item.title}
</motion.h3>
<PlusIcon className="group-hover:text-foreground text-muted-foreground transition-all" />
</div>
</motion.button>
))}
</div>
</ScrollArea>
<Dialog
actionsRef={actionsRef}
onOpenChange={handleClose}
open={isOpen}
>
<AnimatePresence mode="popLayout">
{isOpen && activeItem && (
<DialogPortal keepMounted>
<DialogBackdrop />
<DialogViewport
className="grid place-items-center p-4 pt-32"
hidden={false}
>
<DialogPopup
className="relative w-full max-w-4xl flex flex-col overflow-hidden rounded"
hidden={false}
render={
<motion.div
layoutId={`card-container-${activeItem.id}`}
onLayoutAnimationComplete={() => {
if (!isOpen) {
actionsRef.current?.unmount();
setTimeout(() => setActiveItem(null), 50);
}
}}
/>
}
>
<ScrollArea className="h-[calc(100vh-4rem)]" noScrollBar>
<motion.div
animate={{ opacity: 1 }}
className="flex flex-col h-full pb-[10vh]"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
transition={{
duration: 0.15,
}}
>
<div className="relative h-64 sm:h-96 w-full shrink-0 overflow-hidden">
<motion.div
className="w-full h-full"
layoutId={`image-container-${activeItem.id}`}
>
<img
alt={activeItem.title}
className="h-full w-full object-cover dark:brightness-20 dark:grayscale-25"
height={500}
src={activeItem.image}
width={500}
/>
</motion.div>
</div>
<div className="flex flex-col p-4 sm:p-8 justify-start text-left space-y-6">
<DialogTitle
className="text-3xl sm:text-4xl md:text-5xl xl:text-6xl font-bold"
render={
<motion.h2 layoutId={`title-${activeItem.id}`}>
{activeItem.title}
</motion.h2>
}
/>
<motion.div
animate={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, y: 10 }}
transition={{ delay: 0.2 }}
>
{activeItem.content}
</motion.div>
</div>
<DialogClose
className="absolute right-4 top-4 z-20"
render={
<Button
className="rounded-full shadow-lg"
size="icon"
variant="secondary"
>
<X size={16} />
</Button>
}
/>
</motion.div>
</ScrollArea>
</DialogPopup>
</DialogViewport>
</DialogPortal>
)}
</AnimatePresence>
</Dialog>
</LayoutGroup>
</div>
);
}
type CardItem = {
id: string;
title: string;
image: string;
content: React.ReactNode;
};
const ITEMS: CardItem[] = [
{
content: (
<div className="space-y-4 text-muted-foreground leading-relaxed">
<p>
Modern development is human + AI. We optimized Lumi UI's structure so
that AI assistants generate correct, idiomatic code on the first
attempt.
</p>
<ul className="list-disc pl-5 space-y-2">
<li>
<strong className="text-foreground">Flat Semantic Exports:</strong>{" "}
Every component is accessible at the root level, making it easier
for AI to infer usage and reducing context tokens.
</li>
<li>
<strong className="text-foreground">
Composites as Living Examples:
</strong>{" "}
Our composite components serve as executable documentation.
</li>
<li>
<strong className="text-foreground">Immutable Logic Blocks:</strong>{" "}
Primitives are stable building blocks. You compose them rather than
modifying core logic.
</li>
</ul>
<div className="pt-8">
<h4 className="text-foreground font-semibold mb-4 text-lg">
Deep Dive: Optimization
</h4>
<div className="grid gap-4">
{Array.from({ length: 3 }).map((_, i) => (
<div className="bg-muted/50 rounded-lg p-4 space-y-2" key={i}>
<div className="h-4 w-1/3 bg-muted rounded" />
<div className="h-20 w-full bg-muted rounded" />
</div>
))}
</div>
</div>
</div>
),
id: "card-1",
image: "/images/placeholder.svg",
title: "Discoverable",
},
{
content: (
<div className="space-y-4 text-muted-foreground leading-relaxed">
<p>
Base UI provides the behavioral foundation, but we provide the visual
consistency. Every component adapts to your needs following a unified
language.
</p>
<ul className="list-disc pl-5 space-y-2">
<li>
<strong className="text-foreground">The Utility Pattern:</strong> We
use utility classes to provide consistent styling across all
components.
</li>
<li>
<strong className="text-foreground">Global Animation:</strong> All
interactive elements use globally configured animation utilities for
cohesive transitions.
</li>
<li>
<strong className="text-foreground">Hit-Test Philosophy:</strong> We
use pseudo-elements to separate visual highlights from interactive
containers, creating forgiving, clickable areas.
</li>
</ul>
<div className="pt-8">
<h4 className="text-foreground font-semibold mb-4 text-lg">
Design System Specs
</h4>
<div className="grid gap-4">
<div className="aspect-video bg-muted rounded-lg w-full flex items-center justify-center text-muted-foreground">
Animation Curve Visualization
</div>
<div className="aspect-video bg-muted rounded-lg w-full flex items-center justify-center text-muted-foreground">
Spacing Scale
</div>
</div>
</div>
</div>
),
id: "card-2",
image: "/images/placeholder.svg",
title: "Predictable",
},
{
content: (
<div className="space-y-4 text-muted-foreground leading-relaxed">
<p>
We refuse the false dichotomy between speed and control. Our Dual
Layer Architecture accommodates both prototyping and polishing modes.
</p>
<ul className="list-disc pl-5 space-y-2">
<li>
<strong className="text-foreground">Composites = Velocity:</strong>{" "}
Pre-assembled components that combine structure, styling, and logic
for MVPs and standard use cases.
</li>
<li>
<strong className="text-foreground">Primitives = Control:</strong>{" "}
Thin wrappers around Base UI that enforce zero visual layout, giving
you complete control over DOM structure.
</li>
<li>
<strong className="text-foreground">Mix and Match:</strong> Use
composites for speed and primitive blocks for unique custom designs
in the same project.
</li>
</ul>
<div className="pt-8">
<h4 className="text-foreground font-semibold mb-4 text-lg">
Component Architecture
</h4>
<div className="flex flex-col gap-4">
<div className="h-32 bg-muted rounded-lg border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
Composite Layer
</div>
<div className="h-10 text-center text-muted-foreground text-sm">
↓ Adapts to ↓
</div>
<div className="h-32 bg-muted rounded-lg border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
Primitive Layer
</div>
</div>
</div>
</div>
),
id: "card-3",
image: "/images/placeholder.svg",
title: "Composable",
},
];
Collapsible File Tree
A file tree component with collapsible folders and file badges.
"use client";
import {
CheckCircle2,
ChevronRight,
File,
FileJson,
FileText,
Folder,
FolderOpen,
Image as ImageIcon,
Loader2,
} from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Collapsible,
CollapsiblePanel,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
export type TreeItemType = {
id: string;
name: string;
type: "folder" | "file";
children?: TreeItemType[];
icon?: React.ReactNode;
badge?: string | number | React.ReactNode;
badgeColor?: "default" | "blue" | "red" | "green";
isOpen?: boolean;
};
interface TreeItemProps {
item: TreeItemType;
depth?: number;
}
function getFileIcon(name: string, customIcon?: React.ReactNode) {
if (customIcon) return customIcon;
if (name.endsWith(".tsx") || name.endsWith(".ts"))
return <FileText className="size-4 text-blue-400" />;
if (name.endsWith(".css"))
return <FileText className="size-4 text-sky-300" />;
if (name.endsWith(".json"))
return <FileJson className="size-4 text-yellow-400" />;
if (name.endsWith(".png") || name.endsWith(".jpg"))
return <ImageIcon className="size-4 text-purple-400" />;
if (name.endsWith(".md"))
return <FileText className="size-4 text-gray-400" />;
return <File className="size-4 text-muted-foreground" />;
}
function TreeItem({ item, depth = 0 }: TreeItemProps) {
const isFolder = item.type === "folder";
const paddingLeft = depth * 16 + 12;
const renderBadge = () => {
if (!item.badge) return null;
if (React.isValidElement(item.badge)) {
return <div className="ml-auto flex items-center">{item.badge}</div>;
}
const colorStyles = {
blue: "bg-blue-600 text-white",
default: "bg-muted text-muted-foreground",
green: "bg-green-900/50 text-green-200 border border-green-900",
red: "bg-red-900/50 text-red-200 border border-red-900",
};
return (
<span
className={cn(
"ml-auto text-[10px] px-1.5 py-0.5 rounded-full font-medium leading-none",
colorStyles[item.badgeColor || "default"],
)}
>
{item.badge}
</span>
);
};
if (isFolder) {
return (
<Collapsible className="w-full">
<CollapsibleTrigger
render={
<Button
className={cn(
"group flex w-full items-center gap-2 py-1.5 pr-3 text-sm hover:bg-accent/50 text-foreground transition-colors rounded-sm justify-start",
)}
style={{ paddingLeft: `${paddingLeft}px` }}
variant="ghost"
>
<ChevronRight className="size-4 text-muted-foreground shrink-0 transition-transform duration-200 group-data-panel-open:rotate-90" />
<Folder className="size-4 text-blue-500 fill-blue-500/20 group-data-panel-open:hidden" />
<FolderOpen className="size-4 text-blue-500 fill-blue-500/20 hidden group-data-panel-open:block" />
<span className="truncate font-medium">{item.name}</span>
{renderBadge()}
</Button>
}
/>
<CollapsiblePanel className="relative">
<div
className="absolute left-0 w-px bg-border/40 h-full"
style={{ left: `${paddingLeft + 7}px` }}
/>
{item.children?.map((child) => (
<TreeItem depth={depth + 1} item={child} key={child.id} />
))}
</CollapsiblePanel>
</Collapsible>
);
}
return (
<div
className="flex items-center gap-2 py-1.5 pr-3 text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors cursor-pointer rounded-sm"
style={{ paddingLeft: `${paddingLeft + 20}px` }}
>
{getFileIcon(item.name, item.icon)}
<span className="truncate">{item.name}</span>
{renderBadge()}
</div>
);
}
const exampleData: TreeItemType[] = [
{
badge: "New",
children: [
{
badge: 9,
badgeColor: "blue",
children: [
{
children: [
{ id: "button", name: "button.tsx", type: "file" },
{ id: "collapsible", name: "collapsible.tsx", type: "file" },
{
badge: "Error",
badgeColor: "red",
id: "dialog",
name: "dialog.tsx",
type: "file",
},
],
id: "ui",
isOpen: true,
name: "ui",
type: "folder",
},
{
badge: <CheckCircle2 className="size-3 text-green-500" />,
id: "header",
name: "header.tsx",
type: "file",
},
{ id: "footer", name: "footer.tsx", type: "file" },
],
id: "components",
isOpen: true,
name: "components",
type: "folder",
},
{
children: [
{ id: "utils", name: "utils.ts", type: "file" },
{
icon: (
<Loader2 className="size-4 animate-spin text-muted-foreground" />
),
id: "hooks",
name: "hooks.ts",
type: "file",
},
],
id: "lib",
name: "lib",
type: "folder",
},
{
badge: 2,
children: [
{ id: "page", name: "page.tsx", type: "file" },
{ id: "layout", name: "layout.tsx", type: "file" },
],
id: "app",
name: "app",
type: "folder",
},
],
id: "src",
isOpen: true,
name: "src",
type: "folder",
},
{
children: [
{
children: [{ id: "logo", name: "logo.png", type: "file" }],
id: "images",
name: "images",
type: "folder",
},
],
id: "public",
name: "public",
type: "folder",
},
{
icon: (
<div className="size-4 text-red-500 font-bold text-[10px] leading-4 text-center">
npm
</div>
),
id: "pkg",
name: "package.json",
type: "file",
},
{
badge: "Docs",
badgeColor: "default",
id: "readme",
name: "README.md",
type: "file",
},
];
export function CollapsibleFileTreeDemo() {
return (
<div className="w-full max-w-lg my-12 rounded-lg border bg-background/50 p-2 font-mono text-sm shadow-sm h-full">
{exampleData.map((item) => (
<TreeItem item={item} key={item.id} />
))}
</div>
);
}