@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

Header

Top section with a bottom border. Accepts all div HTML attributes.

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

Footer

Bottom section with a top border. Hidden when empty (display: none). Accepts all div HTML attributes.

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

Main

Scrollable content area. Grows to fill available space (flex-grow: 1). Use forwardRef — the ref forwards to the underlying div.

| 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. | | className | string | — | | disabled | boolean | — | | icon | ReactNode | Override the default SVG icon | | title | string | Tooltip text |

Exports

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