Catnips Dialog

A React dialog/modal component library with Catnip design system.

Installation

# Using bun
bun add catnips-dialog

# Using npm
npm install catnips-dialog

# Using yarn
yarn add catnips-dialog

# Using pnpm
pnpm add catnips-dialog

Usage

Import and use the Dialog component

Styles are automatically injected when the Dialog component is rendered - no manual CSS import needed!

import { Dialog } from "catnips-dialog";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>

      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title="Dialog Title"
        description="Dialog description text"
        actions={[
          { label: "Cancel", onClick: () => setIsOpen(false), variant: "outline" },
          { label: "Confirm", onClick: handleConfirm, variant: "secondary" },
        ]}
      />
    </>
  );
}

API

DialogProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | - | Whether the dialog is visible | | onClose | () => void | - | Callback when dialog should close | | title | string | - | Dialog title | | description | ReactNode | - | Description text or custom content | | actions | DialogAction[] | [] | Action buttons | | children | ReactNode | - | Scrollable body content | | closeOnOverlayClick | boolean | true | Close when clicking outside | | closeOnEscape | boolean | true | Close when pressing ESC | | className | string | - | Additional CSS class for the dialog container |

DialogAction

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Button text | | onClick | () => void | - | Click handler | | variant | "primary" \| "secondary" \| "outline" | "primary" | Button style |

Button Variants

| Variant | Description | |---------|-------------| | primary | Green background (#7afba3) - for single button dialogs | | secondary | White background (#f2f2f2) - for primary action in 2-button dialogs | | outline | Transparent with white border - for secondary action |

Customization

The dialog uses CSS variables that you can override to customize the appearance:

:root {
  --cn-dialog-bg: #2c373a;
  --cn-dialog-bg-dark: #152124;
  --cn-dialog-text-primary: #f2f2f2;
  --cn-dialog-text-secondary: #a1a6a7;
  --cn-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
  --cn-dialog-border-radius: 24px;
  --cn-dialog-btn-radius: 100px;
  --cn-dialog-btn-primary-bg: #7afba3;
  --cn-dialog-btn-primary-text: #152124;
  --cn-dialog-btn-secondary-bg: #f2f2f2;
  --cn-dialog-btn-secondary-text: #152124;
  --cn-dialog-btn-outline-border: #f2f2f2;
  --cn-dialog-btn-outline-text: #f2f2f2;
  --cn-dialog-z-index: 9999;
}

You can also use the className prop to add custom classes for more specific styling.

Examples

Basic Dialog (1 action)

<Dialog
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Success"
  description="Operation completed successfully."
  actions={[{ label: "OK", onClick: () => setIsOpen(false) }]}
/>

Confirmation Dialog (2 actions)

<Dialog
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Delete Item"
  description="Are you sure you want to delete this item?"
  actions={[
    { label: "Cancel", onClick: () => setIsOpen(false), variant: "outline" },
    { label: "Delete", onClick: handleDelete, variant: "secondary" },
  ]}
/>

Scrollable Dialog with Custom Content

<Dialog
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Preview"
  description="Select an option below"
  actions={[
    { label: "Cancel", onClick: () => setIsOpen(false), variant: "outline" },
    { label: "Confirm", onClick: handleConfirm, variant: "secondary" },
  ]}
>
  {/* Custom scrollable content */}
  <img src="/preview.png" alt="Preview" />
  <p>Additional information here</p>
</Dialog>

Blocking Dialog (Loading State)

<Dialog
  open={isLoading}
  onClose={() => {}}
  title="Processing"
  description="Please wait..."
  closeOnOverlayClick={false}
  closeOnEscape={false}
>
  <LoadingSpinner />
</Dialog>

Development

# Install dependencies
bun install

# Run development server
bun run dev

# Type check
bun run typecheck

• Demo page: http://localhost:3000
• Example page: http://localhost:3000/example

License

MIT