> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Overlays and compound components

> Build stateless dialogs, tabs, menus, sheets and feedback surfaces.

# Overlays and compound components

These components provide structure, styling, ARIA roles, and state data attributes. They are deliberately **stateless**: your application owns interaction, focus management, keyboard handling, and portal behaviour.

For production modal behaviour, add your own focus trap, Escape handling, background inertness, and portal strategy around the visual primitives.

## Tabs

Tabs are stateless. Keep the selected value in application state, set `data-active` on the current tab, and hide inactive panels.

> [tab] Preview
>
> [Rendered Tabs preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-2)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Dialog` provides modal structure and `data-state`; your app controls `open`, focus management, Escape handling, background inertness, and portal placement.

> [tab] Preview
>
> [Rendered Dialog preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-1)

> [tab] Code
>
> ```tsx theme={null}
> <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

`AlertDialog` is the confirmation-oriented dialog family. Use its action and cancel primitives for destructive decisions.

> [tab] Preview
>
> [Rendered AlertDialog preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-3)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Popover` composes a trigger with a positioned content panel. Drive `data-state` and dismiss behaviour from your application.

> [tab] Preview
>
> [Rendered Popover preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-4)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Sheet` is a modal side panel. It accepts `open`; content supports `side="top" | "bottom" | "left" | "right"`.

> [tab] Preview
>
> [Rendered Sheet preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-5)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Tooltip` provides the trigger/content structure. Use `data-state` and your own hover, focus, and dismissal logic when client behaviour is needed.

> [tab] Preview
>
> [Rendered Tooltip preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-6)

> [tab] Code
>
> ```tsx theme={null}
> <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>
> ```

## Toast

`ToastProvider` positions notifications; `Toast` supports `default`, `success`, `error`, and `warning` variants.

> [tab] Preview
>
> [Rendered Toast preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-7)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Menu` exposes structural trigger, content, item, separator, label, and group primitives. Control visibility with `data-state`.

> [tab] Preview
>
> [Rendered Menu preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-8)

> [tab] Code
>
> ```tsx theme={null}
> <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

`ContextMenu` has the same compound structure as `Menu`; attach your application’s `contextmenu` handler to open it at the pointer position.

> [tab] Preview
>
> [Rendered ContextMenu preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-9)

> [tab] Code
>
> ```tsx theme={null}
> <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

`Accordion` is stateless. Apply `data-state="open" | "closed"` to each item, trigger, and content from your own state.

> [tab] Preview
>
> [Rendered Accordion preview](https://black-silva.github.io/silva-ui/previews/?example=overlay-10)

> [tab] Code
>
> ```tsx theme={null}
> <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>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.