@slithy/modal-parts

Layout primitives for @slithy/modal-kit modals: Header, Footer, Main, and CloseButton.

Installation

pnpm add @slithy/modal-core @slithy/modal-kit @slithy/modal-parts

Usage

import { useModalStore } from '@slithy/modal-core'
import { Modal } from '@slithy/modal-kit'
import { CloseButton, Footer, Header, Main } from '@slithy/modal-parts'

function MyModal() {
  return (
    <Modal aria-label="Settings">
      <Header>Settings</Header>
      <Main>
        <p>Content goes here.</p>
      </Main>
      <Footer>Footer text</Footer>
      <CloseButton handleClose={() => useModalStore.getState().closeModal()} />
    </Modal>
  )
}

Works the same with @slithy/modal-spring or any other adapter — just swap Modal for the adapter's component.

Components

All four components forward their ref to the underlying DOM element and accept full HTML attribute passthrough (ButtonHTMLAttributes for CloseButton, minus type; HTMLAttributes<HTMLDivElement> for the other three) — only the notable/non-passthrough props are listed below.

Header

Top section with a bottom border.

| Prop | Type | |---|---| | children | ReactNode | | className | string |

Footer

Bottom section with a top border. Hidden when empty (display: none).

| Prop | Type | |---|---| | children | ReactNode | | className | string |

Main

Scrollable content area. Grows to fill available space (flex-grow: 1). This is the typical scroll owner for card-style modals where the dialog itself is height-capped.

| Prop | Type | Description | |---|---|---| | children | ReactNode | — | | className | string | — | | inert | boolean | Blocks all interactions. Consider accessibility impact. |

CloseButton

Absolutely-positioned close button (top-right). Renders an × SVG icon by default.

| Prop | Type | Description | |---|---|---| | handleClose | () => void | Required. Called on click. | | aria-label | string | Defaults to "Close" — override for i18n | | className | string | — | | disabled | boolean | — | | icon | ReactNode | Override the default SVG icon | | title | string | Tooltip text |

Accessibility

These are layout primitives, not the dialog itself — see @slithy/modal-kit or @slithy/modal-spring for the full WAI-ARIA Dialog (Modal) pattern audit. The one thing to know here: CloseButton's accessible name defaults to "Close" via aria-label, overridable for i18n — it does not depend on the modal itself having an accessible name (that's Modal's aria-label/aria-labelledby, a separate requirement).

Exports

| Export | Description | |---|---| | Header | Top section with bottom border | | HeaderProps | — | | Footer | Bottom section with top border; hidden when empty | | FooterProps | — | | Main | Scrollable flex-grow content area | | MainProps | — | | CloseButton | Absolutely-positioned close button | | CloseButtonProps | — |