Detail Modal

Bottom sheet modal with drag handle, header, content area, and customizable actions.

Preview

Usage

import { DetailModal } from "@/components/profile"

<DetailModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Product Details"
  subtitle="Premium quality"
  image="/product.jpg"
  actions={[
    { label: "Buy", primary: true, onClick: () => {} },
    { label: "Share", icon: <Share2 />, onClick: () => {} },
  ]}
>
  <p>Product description content...</p>
</DetailModal>

Props

Prop	Type	Description
isOpen	boolean	Controls visibility
onClose	() => void	Close callback
title	string	Modal title
subtitle	string	Subtitle text
image	string	Header image
actions	Action[]	Footer buttons
children	ReactNode	Modal content