Overlay Components

Dialogs, sheets, drawers, popovers, tooltips, and context menus — all Crystal-themed.

Overlay components handle layered UI that appears above the main content. All Crystal overlays use crystallization-responsive radius, shadows, and animation timing.

Dialog

Open in Storybook→

Modal dialog with backdrop overlay. Supports a crystallization prop on DialogContent.

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter,
} from '@artasce/crystal-ui';

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>Make changes to your profile.</DialogDescription>
    </DialogHeader>
    <Input placeholder="Name" />
    <DialogFooter>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

DialogContent Crystal Props

Token	Variable	Value	Description
`crystallization`	`CrystalCrystallization`	—	Override crystallization (affects shadow depth)
`showCloseButton`	`boolean`	true	Show/hide the X close button

Values update live with theme changes. Click any row to copy the CSS variable.

Also exports: DialogClose, DialogOverlay, DialogPortal.

AlertDialog

Confirmation dialog that requires explicit action. Same structure as Dialog but blocks dismissal by clicking outside.

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent,
  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
  AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
} from '@artasce/crystal-ui';

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Sheet

Slide-in panel from any edge of the screen. Uses crystallization-responsive radius and border.

import {
  Sheet, SheetTrigger, SheetContent, SheetHeader,
  SheetTitle, SheetDescription,
} from '@artasce/crystal-ui';

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Panel</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>Configure your preferences.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Also exports: SheetClose, SheetFooter.

Drawer

Bottom-sheet style drawer, mobile-friendly. Powered by vaul.

import {
  Drawer, DrawerTrigger, DrawerContent, DrawerHeader,
  DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose,
} from '@artasce/crystal-ui';

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>Refine your search.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Apply</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Click-triggered floating content panel.

import { Popover, PopoverTrigger, PopoverContent } from '@artasce/crystal-ui';

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content here.</p>
  </PopoverContent>
</Popover>

Also exports: PopoverAnchor.

Content panel triggered on hover. Useful for previews and user info.

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@artasce/crystal-ui';

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#">@artasce</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>AI Solutions Agency</p>
  </HoverCardContent>
</HoverCard>

Hover/focus tooltip for brief labels. Wrap the tree in TooltipProvider once.

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@artasce/crystal-ui';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="icon" size="icon"><Settings /></Button>
    </TooltipTrigger>
    <TooltipContent>Settings</TooltipContent>
  </Tooltip>
</TooltipProvider>

DropdownMenu

Context actions triggered by a button click.

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
} from '@artasce/crystal-ui';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon"><MoreVertical /></Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Also exports: checkbox items, radio items, sub-menus, groups, and shortcuts.

ContextMenu

Right-click context menu with the same sub-component API as DropdownMenu.

import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
} from '@artasce/crystal-ui';

<ContextMenu>
  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Command

Searchable command palette (Cmd+K style). Powered by cmdk.

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator,
} from '@artasce/crystal-ui';

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem>New Project</CommandItem>
      <CommandItem>Search Docs</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Use CommandDialog for a dialog-wrapped version:

import { CommandDialog } from '@artasce/crystal-ui';

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command..." />
  <CommandList>...</CommandList>
</CommandDialog>

Also exports: CommandShortcut.

Import All

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogAction, AlertDialogCancel,
  Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle,
  Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle,
  Popover, PopoverTrigger, PopoverContent,
  HoverCard, HoverCardTrigger, HoverCardContent,
  Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
  Command, CommandInput, CommandList, CommandItem, CommandDialog,
} from '@artasce/crystal-ui';

DialogContent Crystal Props

On this page