Caprice UI

Avatar

An easily stylable avatar component.

Installation

npx caprice-ui add avatar

npm install @caprice-ui/react

Install the following dependencies:

Update the import paths to match your project setup.

Usage

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

tsx 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>