Components
Loading preview...
a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.
npx shadcn@latest add https://21st.dev/r/sshahaider/dialogimport {
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
export default function StickyHeaderFooter() {
return (
<Dialog modal>
<DialogTrigger asChild>
<Button variant="outline">Sticky Header & Footer</Button>
</DialogTrigger>
<DialogContent className="flex max-h-[80vh] flex-col">
<DialogHeader className="shrink-0">
<DialogTitle>Sticky Header & Footer</DialogTitle>
<DialogDescription>
Both header and footer are always visible.
</DialogDescription>
</DialogHeader>
<DialogBody className="flex-1 space-y-5 overflow-y-auto">
{Array.from({ length: 20 }).map((_, i) => (
<div key={i}>
<h3 className="text-base font-semibold">Heading {i + 1}</h3>
<p className="text-muted-foreground text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
</p>
</div>
))}
</DialogBody>
<DialogFooter className="shrink-0">
<DialogClose asChild>
<Button variant="outline">Close</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}