Sheet

import { Button } from '@/ui/button';
import { Sheet, SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/ui/sheet';

<Sheet>
    <SheetTrigger render={<Button variant="secondary" size="md">Open sheet</Button>} />
    <SheetContent>
        <SheetHeader>
            <SheetTitle>Chat settings</SheetTitle>
        </SheetHeader>
        <SheetBody>…</SheetBody>
        <SheetFooter>
            <SheetClose render={<Button variant="secondary" size="md">Cancel</Button>} />
            <SheetClose render={<Button size="md">Save</Button>} />
        </SheetFooter>
    </SheetContent>
</Sheet>