Site settings
Change the appearance of the site to suit your preferences
Drawer
Drawers are modals that show up from a certain side.
A simple drawer
<Drawer placement="bottom" size="md"> <DrawerTrigger asChild> <Button variant="secondary" size="md"> Open a simple drawer </Button> </DrawerTrigger> <DrawerContent> <DrawerHeader> <DrawerTitle>Drawer Title</DrawerTitle> <DrawerCloseTrigger /> </DrawerHeader> <DrawerBody> <Text variant="sm"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </Text> </DrawerBody> </DrawerContent> </Drawer>
A fullscreen drawer with the customised DrawerFullScreenHeader and buttons in the DrawerFooter
() => { const [open, setOpen] = React.useState(false); return ( <Drawer placement="end" size="full"> <DrawerTrigger onClick={() => setOpen(true)} asChild> <Button variant="primary" size="md"> Open a fullscreen drawer </Button> </DrawerTrigger> <DrawerContent> <DrawerFullScreenHeader title="FullScreenDrawer" /> <DrawerBody> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </DrawerBody> <DrawerFooter> <Button variant="ghost">Cancel</Button> <Button variant="primary">Save</Button> </DrawerFooter> </DrawerContent> </Drawer> ); }
A drawer with scroll
<Drawer placement="bottom" size="md"> <DrawerTrigger asChild> <Button variant="secondary" size="md"> Open </Button> </DrawerTrigger> <DrawerContent maxHeight="30vh"> <DrawerHeader> <DrawerTitle>Drawer Title</DrawerTitle> <DrawerCloseTrigger /> </DrawerHeader> <DrawerBody> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </DrawerBody> <DrawerFooter> <Button variant="ghost">Cancel</Button> <Button variant="primary">Save</Button> </DrawerFooter> </DrawerContent> </Drawer>