"use client";import { AlertDialog } from "@base-ui/react/alert-dialog";import { Button } from "@base-ui/react/button";import { Field } from "@base-ui/react/field";import { Input } from "@base-ui/react/input";import { Separator } from "@base-ui/react/separator";import { Toggle } from "@base-ui/react/toggle";import { ToggleGroup } from "@base-ui/react/toggle-group";import { Toolbar } from "@base-ui/react/toolbar";import { Tooltip } from "@base-ui/react/tooltip";import { ImageIcon, ListBulletsIcon, ListNumbersIcon, PaletteIcon, PaperclipIcon, PaperPlaneTiltIcon, TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, TextBolderIcon, TextItalicIcon, TextUnderlineIcon, TrashIcon, XIcon,} from "@phosphor-icons/react";import { AnimatePresence, motion } from "motion/react";import * as React from "react";export default function ExampleAlertDialog() { const [open, setOpen] = React.useState(false); return ( } > Compose {open && ( } className="p-f i-0 min-h-dvh bg-black/20" />

} className="o-h w-full bg-white bc-silver-2 c-slate-12 br-2 bw-1 bs-o-lg" style={{ maxWidth: "600px" }} >

New message } >

Compose email

Send a message to your recipient

To Subject Message

`d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Bold `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Italic `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Underline } > Text color `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Align left `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Align center `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Align right `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Bullet list `d-f w-8 h-8 ai-c jc-c bw-0 br-1 us-none c-p fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 ${ state.pressed ? "bg-indigo c-white" : "bg-transparent c-slate-8 h:bg-silver-1 h:c-slate-10" }` } /> } > Numbered list } > Remove formatting } > Attach Attach files from your device } > Insert Insert images into message

} > Discard } > Send

)} );}

 Compose email

Compose email

Dialog

Installation

Examples

Base

Verification

OTP

Payment

Settings

API Reference