<Tabs value={activeTab}>
  <TabList aria-label="Account settings">
    <Tab value="profile" data-active={activeTab === "profile"} onClick={() => setActiveTab("profile")}>Profile</Tab>
    <Tab value="security" data-active={activeTab === "security"} onClick={() => setActiveTab("security")}>Security</Tab>
  </TabList>
  <TabPanel value="profile" hidden={activeTab !== "profile"}>Profile content</TabPanel>
  <TabPanel value="security" hidden={activeTab !== "security"}>Security content</TabPanel>
</Tabs>

<Dialog open={isOpen}>
  <DialogOverlay />
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete project?</DialogTitle>
      <DialogDescription>This cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose onClick={() => setIsOpen(false)}>Cancel</DialogClose>
      <Button onClick={removeProject}>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<AlertDialog open={isOpen}>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Discard changes?</AlertDialogTitle>
      <AlertDialogDescription>Your unsaved changes will be lost.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel onClick={() => setIsOpen(false)}>Keep editing</AlertDialogCancel>
      <AlertDialogAction onClick={discardChanges}>Discard</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

<Popover>
  <PopoverTrigger>
    <Button onClick={() => setOpen(!open)}>Share</Button>
  </PopoverTrigger>
  <PopoverContent data-state={open ? "open" : "closed"} side="bottom">
    Copy a link or invite a collaborator.
    <PopoverClose onClick={() => setOpen(false)}>Close</PopoverClose>
  </PopoverContent>
</Popover>

<Sheet open={isOpen}>
  <SheetOverlay />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Project settings</SheetTitle>
      <SheetDescription>Update this project’s defaults.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose onClick={() => setIsOpen(false)}>Done</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline" aria-describedby="save-tip">Save</Button>
  </TooltipTrigger>
  <TooltipContent id="save-tip" side="top" data-state={showTip ? "open" : "closed"}>
    Save this project
  </TooltipContent>
</Tooltip>

<ToastProvider position="top-right">
  <Toast variant="success">
    <ToastTitle>Changes saved</ToastTitle>
    <ToastDescription>Your project settings are up to date.</ToastDescription>
    <ToastClose onClick={dismissToast} />
  </Toast>
</ToastProvider>

<Menu>
  <MenuTrigger>
    <Button variant="outline" onClick={() => setOpen(!open)}>Actions</Button>
  </MenuTrigger>
  <MenuContent data-state={open ? "open" : "closed"}>
    <MenuLabel>Project</MenuLabel>
    <MenuGroup>
      <MenuItem onClick={renameProject}>Rename</MenuItem>
      <MenuItem onClick={duplicateProject}>Duplicate</MenuItem>
    </MenuGroup>
    <MenuSeparator />
    <MenuItem disabled>Archive</MenuItem>
  </MenuContent>
</Menu>

<ContextMenu>
  <ContextMenuTrigger onContextMenu={openAtPointer}>
    <Box p="medium" borderWidth={1}>Right-click this project</Box>
  </ContextMenuTrigger>
  <ContextMenuContent data-state={open ? "open" : "closed"}>
    <ContextMenuItem onClick={renameProject}>Rename</ContextMenuItem>
    <ContextMenuItem onClick={duplicateProject}>Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem disabled>Archive</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

<Accordion type="single">
  <AccordionItem value="shipping" data-state={openItem === "shipping" ? "open" : "closed"}>
    <AccordionTrigger onClick={() => setOpenItem("shipping")} data-state={openItem === "shipping" ? "open" : "closed"}>
      When does my order ship?
    </AccordionTrigger>
    <AccordionContent data-state={openItem === "shipping" ? "open" : "closed"}>
      Orders leave our warehouse in one to two business days.
    </AccordionContent>
  </AccordionItem>
</Accordion>