A side sheet for order details that opens a second sheet on top for refunds while the first one recedes behind it. Escape and Back peel the layers off one at a time.
Amount
Reason
npx shadcn@latest add https://hyperblur.dev/r/modal-side-sheet.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-side-sheet.tsx.
import { ModalSideSheet } from "@/components/hyperblur/modal-side-sheet"
<ModalSideSheet onRefund={(amount, reason) => refund(amount, reason)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "View order" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| side | "right" | "left" | "right" | Edge the sheets slide in from. |
| order | { id: string; customer: string; email: string; placed: string; items: { name: string; variant: string; qty: number; price: number; tint?: string }[]; shipping: number } | Order #4821 | Order shown in the first sheet. |
| reasons | string[] | ["Damaged", "Wrong size", "Arrived late", "Changed mind"] | Refund reasons offered as chips. |
| currency | string | "USD" | ISO currency code for all amounts. |
| locale | string | "en-US" | Locale used to format money. |
| onRefund | (amount: number, reason: string) => void | undefined | Called when a refund is issued from the nested sheet. |
| onFulfill | (orderId: string) => void | undefined | Called when the order is marked as fulfilled. |
| accent | string | "#a78bfa" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |