A React dialog/modal component library with Catnip design system
npm install catnips-dialogA React dialog/modal component library with Catnip design system.
``bashUsing bun
bun 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 (
<>
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 installRun development server
bun run devType check
bun run typecheck
``- Demo page: http://localhost:3000
- Example page: http://localhost:3000/example
MIT