A 480px right sheet over the scrim for creating or inspecting one record: a header with the title and close, a scrolling body of DrawerSections split by the strong hairline, and a footer for the actions. DescriptionList is its field rows. Dialog is the centred version for a confirmation or a question that blocks the flow.
import { Drawer, DrawerSection, DescriptionList, Dialog } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| title* | ReactNode | - | |
| children* | ReactNode | - | - |
| open | Controlled open state boolean | - | |
| onOpenChange | (open: boolean) => void | - | - |
| trigger | ReactNode | - | - |
| description | ReactNode | - | |
| footer | Right-aligned actions pinned to the bottom, such as Cancel and Save. ReactNode | - | - |
| width | number | 480 | 360720480 |
Use Drawer for a record's detail or a short create form (Add client, New task). Use Dialog for a confirmation or a question that blocks the flow. Sections inside a drawer are separated by the strong hairline.
A short create form with Cancel and the one primary action in the footer.
Dialog: a centred question that blocks the flow, with the safe choice first.
DescriptionList on its own: a 128px caption label and a small value per row.
Both overlays from their triggers, and the sections and rows inline on a card.