Caprice UI

Installation

npx caprice add alert-dialog

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui-components/react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

import * as AlertDialog from "@/components/ui/alert-dialog"

import * as AlertDialog from "@caprice-ui/react/alert-dialog"

<AlertDialog.Root>
  <AlertDialog.Trigger render={(props) => <Button {...props}>Discard draft</Button>} />
 
  <AlertDialog.Content>
    <AlertDialog.Title>Discard draft?</AlertDialog.Title>
    <AlertDialog.Description>You can't undo this action.</AlertDialog.Description>
    <AlertDialog.Footer>
      <AlertDialog.Close>Cancel</AlertDialog.Close>
      <AlertDialog.Close variant="default">Discard</AlertDialog.Close>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>