Catnips Dialog

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

Installation

``bash


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

$3

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

`tsx
import { Dialog } from "catnips-dialog";

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

return (
<>
setIsOpen(true)}>Open 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

$3

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

$3

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

`css
: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

$3

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

$3

`tsx
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" },
]}
/>
`

$3

`tsx
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 /}



Additional information here



`

$3

`tsx
open={isLoading}
onClose={() => {}}
title="Processing"
description="Please wait..."
closeOnOverlayClick={false}
closeOnEscape={false}
>


`

Development

`bash


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