Overlays

Modal

Dialog opens a centered card over the page. Wrap a Button in DialogTrigger asChild to open it. Inside DialogContent, use DialogHeader, DialogTitle with text, DialogDescription, DialogBody, and DialogFooter. Set size from sm to 2xl, and showCloseButton={false} to hide the close icon.

Delete todo

import { Button } from "@manta-eu/react/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@manta-eu/react/modal";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete todo</Button>
  </DialogTrigger>
  <DialogContent size="sm">
    <DialogHeader>
      <DialogTitle text="Delete this todo?" />
      <DialogDescription>You cannot undo this.</DialogDescription>
    </DialogHeader>
    <DialogBody className="typography-small text-default-foreground">Launch the developer portal</DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="tertiary">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button variant="destructive">Delete</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Props · Storybook

Sheet

Sheet slides a panel in from an edge of the screen. Set side on SheetContent to right, left, top, bottom, or center. Left and right sheets also take a size of sm, md, or lg.

Open todo

import { Button } from "@manta-eu/react/button";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@manta-eu/react/sheet";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="tertiary">Open todo</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle text="Launch the developer portal" />
      <SheetDescription>Due Friday</SheetDescription>
    </SheetHeader>
    <SheetBody className="typography-small">
      Publish the design system pages and link them from the home page.
    </SheetBody>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="tertiary">Close</Button>
      </SheetClose>
      <SheetClose asChild>
        <Button>Mark as done</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>;

Props · Storybook

Popover

Popover opens a small floating panel next to its trigger. Set side and align on PopoverContent to place it. PopoverItem is a ready-made menu row with a label, an optional description and icon, and an onClick.

No due date

import { useState } from "react";
import { CalendarClock } from "lucide-react";
import { Button } from "@manta-eu/react/button";
import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from "@manta-eu/react/popover";

const [open, setOpen] = useState(false);
const [dueDate, setDueDate] = useState("No due date");
const pick = (label: string) => {
  setDueDate(label);
  setOpen(false);
};

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="tertiary" icon={CalendarClock} showLeftIcon>
      {dueDate}
    </Button>
  </PopoverTrigger>
  <PopoverContent align="start">
    <PopoverItem label="Today" description="Finish it before tonight" onClick={() => pick("Today")} />
    <PopoverItem label="Tomorrow" description="Move it to the next day" onClick={() => pick("Tomorrow")} />
    <PopoverItem label="Next week" description="Start it on Monday" onClick={() => pick("Next week")} />
  </PopoverContent>
</Popover>;

Props · Storybook

Tooltip

Tooltip shows a short hint when the user hovers or focuses its trigger. Wrap your tooltips in one TooltipProvider, which sets the delayDuration. Set side on TooltipContent to place it, and showArrow={false} to drop the arrow.

import { CircleCheck, Trash2 } from "lucide-react";
import { Button } from "@manta-eu/react/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@manta-eu/react/tooltip";

<TooltipProvider delayDuration={200}>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" icon={CircleCheck} iconOnly aria-label="Mark as done" />
    </TooltipTrigger>
    <TooltipContent>Mark as done</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" icon={Trash2} iconOnly aria-label="Delete todo" />
    </TooltipTrigger>
    <TooltipContent side="bottom">Delete todo</TooltipContent>
  </Tooltip>
</TooltipProvider>;

Props · Storybook

Command

Command is a searchable list of actions. CommandDialog opens it in a dialog, controlled by open and onOpenChange. Inside, CommandInput filters the CommandItem rows by their value, and CommandEmpty shows when nothing matches.

Open command menu

import { useState } from "react";
import { Info, ListTodo, Plus } from "lucide-react";
import { Button } from "@manta-eu/react/button";
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@manta-eu/react/command";

const commands = [
  { id: "new", title: "New todo", icon: Plus },
  { id: "today", title: "Show today's todos", icon: ListTodo },
  { id: "help", title: "Keyboard shortcuts", icon: Info },
];

const [open, setOpen] = useState(false);

<Button variant="tertiary" onClick={() => setOpen(true)}>Open command menu</Button>
<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Search commands..." />
    <CommandList>
      <CommandEmpty>No commands found.</CommandEmpty>
      <CommandGroup heading="Todos">
        {commands.map(({ id, title, icon: Icon }) => (
          <CommandItem key={id} value={title} onSelect={() => setOpen(false)}>
            <Icon />
            {title}
          </CommandItem>
        ))}
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

Props · Storybook

HoverMedia

HoverMedia shows an image or a video from src, with an alt text. Set isVideo for a muted video that plays while the pointer is over it, and autoPlay to play it right away. Pass width and height for a fixed image size, and put overlays such as labels in children.

Launch day

import { HoverMedia } from "@manta-eu/react/hover-media";

<HoverMedia
  src="/design-system/launch-board.svg"
  alt="A launch board with three todos"
  width={256}
  height={256}
  containerClassName="size-64 overflow-hidden rounded-lg-v4"
>
  <span className="typography-tiny-medium absolute bottom-2 left-2 rounded-full bg-card px-2 py-1">Launch day</span>
</HoverMedia>;

Props · Storybook