Customized

You can customize existing components or component libraries using @overlastic/react. Here's an example using Ant Design's Drawer component as a reference:

import type { PropsWithOverlays } from '@overlastic/react'
import { useDisclosure } from '@overlastic/react'
import { Button, Drawer } from 'antd'

function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
  const { visible, confirm, cancel } = useDisclosure({
    duration: 200,
    props,
  })

  return (
    <Drawer title={props.title} onClose={cancel} open={visible}>
      {/* Custom contents.... */}
      <Button type="primary" onClick={() => confirm(`${props.title}:confirmed`)}>
        Confirm
      </Button>
    </Drawer>
  )
}

export default MyDrawer