Tail Kit

Usage

The Modal component can be imported using

import { Modal } from '@tail-kit/tail-kit'

function SimpleModal() {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        closable
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
        lorem nec velit egestas, quis varius mi condimentum. Nulla risus velit,
        imperdiet at pharetra a, eleifend eget massa. Donec porta purus eu ex
        hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus nisi.
      </Modal>
    </>
  )
}

function SimpleModal() {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        closable
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
        lorem nec velit egestas, quis varius mi condimentum. Nulla risus velit,
        imperdiet at pharetra a, eleifend eget massa. Donec porta purus eu ex
        hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus nisi.
      </Modal>
    </>
  )
}

function LargeContentModal() {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        dividers
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
        lorem nec velit egestas, quis varius mi condimentum. Nulla risus velit,
        imperdiet at pharetra a, eleifend eget massa. Donec porta purus eu ex
        hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus nisi. In
        auctor convallis ex, vel molestie nibh feugiat sed. Proin dictum
        accumsan sem, in auctor lorem. Ut interdum ultrices dapibus. Vivamus
        eget orci est. Curabitur vulputate suscipit elit sed rutrum. Aenean
        aliquam, lorem ut molestie egestas, dui urna ornare leo, sed euismod ex
        arcu vitae orci. In pellentesque sem nisi, id eleifend erat tincidunt
        ac. Vivamus eget erat eu justo fringilla consectetur non non orci. Fusce
        turpis leo, fringilla eu ullamcorper vitae, luctus et lectus. Etiam
        dictum ex dolor, ut faucibus orci ornare at. Sed diam massa, porta sit
        amet ultrices eu, suscipit ac nibh. Quisque ullamcorper diam vulputate
        diam congue placerat. Etiam hendrerit rutrum neque in vestibulum. Fusce
        dictum, sapien non laoreet pellentesque, est sapien posuere nisi, id
        aliquet mi lorem eu felis. Donec sit amet neque et tellus mollis
        suscipit. Nam molestie bibendum consequat. Fusce a fermentum tellus, sed
        aliquet neque. Curabitur blandit dui egestas nisi vestibulum, tempor
        blandit massa dapibus. Duis eget laoreet metus. Proin interdum urna
        erat, id commodo massa varius vitae. In hac habitasse platea dictumst.
        In auctor scelerisque maximus. Etiam enim justo, faucibus et neque sit
        amet, malesuada dignissim nunc. Curabitur ullamcorper egestas purus, nec
        imperdiet est viverra eu. Orci varius natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Donec in varius dui. Sed
        egestas, metus eu vulputate mattis, metus dolor porta nulla, ut volutpat
        justo purus eu justo. Duis hendrerit, quam eu pellentesque viverra, enim
        erat mattis eros, ac suscipit dolor nulla quis risus. Quisque maximus
        sem et rutrum rutrum. Fusce efficitur a diam at suscipit. Aliquam vel
        nunc accumsan, aliquet lacus eget, imperdiet ante. Cras sagittis
        interdum efficitur. Curabitur turpis sapien, commodo in massa a, sodales
        luctus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi gravida lorem nec velit egestas, quis varius mi condimentum. Nulla
        risus velit, imperdiet at pharetra a, eleifend eget massa. Donec porta
        purus eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
        nisi. In auctor convallis ex, vel molestie nibh feugiat sed. Proin
        dictum accumsan sem, in auctor lorem. Ut interdum ultrices dapibus.
        Vivamus eget orci est. Curabitur vulputate suscipit elit sed rutrum.
        Aenean aliquam, lorem ut molestie egestas, dui urna ornare leo, sed
        euismod ex arcu vitae orci. In pellentesque sem nisi, id eleifend erat
        tincidunt ac. Vivamus eget erat eu justo fringilla consectetur non non
        orci. Fusce turpis leo, fringilla eu ullamcorper vitae, luctus et
        lectus. Etiam dictum ex dolor, ut faucibus orci ornare at. Sed diam
        massa, porta sit amet ultrices eu, suscipit ac nibh. Quisque ullamcorper
        diam vulputate diam congue placerat. Etiam hendrerit rutrum neque in
        vestibulum. Fusce dictum, sapien non laoreet pellentesque, est sapien
        posuere nisi, id aliquet mi lorem eu felis. Donec sit amet neque et
        tellus mollis suscipit. Nam molestie bibendum consequat. Fusce a
        fermentum tellus, sed aliquet neque. Curabitur blandit dui egestas nisi
        vestibulum, tempor blandit massa dapibus. Duis eget laoreet metus. Proin
        interdum urna erat, id commodo massa varius vitae. In hac habitasse
        platea dictumst. In auctor scelerisque maximus. Etiam enim justo,
        faucibus et neque sit amet, malesuada dignissim nunc. Curabitur
        ullamcorper egestas purus, nec imperdiet est viverra eu. Orci varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec in varius dui. Sed egestas, metus eu vulputate mattis, metus
        dolor porta nulla, ut volutpat justo purus eu justo. Duis hendrerit,
        quam eu pellentesque viverra, enim erat mattis eros, ac suscipit dolor
        nulla quis risus. Quisque maximus sem et rutrum rutrum. Fusce efficitur
        a diam at suscipit. Aliquam vel nunc accumsan, aliquet lacus eget,
        imperdiet ante. Cras sagittis interdum efficitur. Curabitur turpis
        sapien, commodo in massa a, sodales luctus arcu.
      </Modal>
    </>
  )
}

function LargeContentModal() {
  const [visible, setVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        dividers
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
        lorem nec velit egestas, quis varius mi condimentum. Nulla risus velit,
        imperdiet at pharetra a, eleifend eget massa. Donec porta purus eu ex
        hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus nisi. In
        auctor convallis ex, vel molestie nibh feugiat sed. Proin dictum
        accumsan sem, in auctor lorem. Ut interdum ultrices dapibus. Vivamus
        eget orci est. Curabitur vulputate suscipit elit sed rutrum. Aenean
        aliquam, lorem ut molestie egestas, dui urna ornare leo, sed euismod ex
        arcu vitae orci. In pellentesque sem nisi, id eleifend erat tincidunt
        ac. Vivamus eget erat eu justo fringilla consectetur non non orci. Fusce
        turpis leo, fringilla eu ullamcorper vitae, luctus et lectus. Etiam
        dictum ex dolor, ut faucibus orci ornare at. Sed diam massa, porta sit
        amet ultrices eu, suscipit ac nibh. Quisque ullamcorper diam vulputate
        diam congue placerat. Etiam hendrerit rutrum neque in vestibulum. Fusce
        dictum, sapien non laoreet pellentesque, est sapien posuere nisi, id
        aliquet mi lorem eu felis. Donec sit amet neque et tellus mollis
        suscipit. Nam molestie bibendum consequat. Fusce a fermentum tellus, sed
        aliquet neque. Curabitur blandit dui egestas nisi vestibulum, tempor
        blandit massa dapibus. Duis eget laoreet metus. Proin interdum urna
        erat, id commodo massa varius vitae. In hac habitasse platea dictumst.
        In auctor scelerisque maximus. Etiam enim justo, faucibus et neque sit
        amet, malesuada dignissim nunc. Curabitur ullamcorper egestas purus, nec
        imperdiet est viverra eu. Orci varius natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Donec in varius dui. Sed
        egestas, metus eu vulputate mattis, metus dolor porta nulla, ut volutpat
        justo purus eu justo. Duis hendrerit, quam eu pellentesque viverra, enim
        erat mattis eros, ac suscipit dolor nulla quis risus. Quisque maximus
        sem et rutrum rutrum. Fusce efficitur a diam at suscipit. Aliquam vel
        nunc accumsan, aliquet lacus eget, imperdiet ante. Cras sagittis
        interdum efficitur. Curabitur turpis sapien, commodo in massa a, sodales
        luctus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi gravida lorem nec velit egestas, quis varius mi condimentum. Nulla
        risus velit, imperdiet at pharetra a, eleifend eget massa. Donec porta
        purus eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
        nisi. In auctor convallis ex, vel molestie nibh feugiat sed. Proin
        dictum accumsan sem, in auctor lorem. Ut interdum ultrices dapibus.
        Vivamus eget orci est. Curabitur vulputate suscipit elit sed rutrum.
        Aenean aliquam, lorem ut molestie egestas, dui urna ornare leo, sed
        euismod ex arcu vitae orci. In pellentesque sem nisi, id eleifend erat
        tincidunt ac. Vivamus eget erat eu justo fringilla consectetur non non
        orci. Fusce turpis leo, fringilla eu ullamcorper vitae, luctus et
        lectus. Etiam dictum ex dolor, ut faucibus orci ornare at. Sed diam
        massa, porta sit amet ultrices eu, suscipit ac nibh. Quisque ullamcorper
        diam vulputate diam congue placerat. Etiam hendrerit rutrum neque in
        vestibulum. Fusce dictum, sapien non laoreet pellentesque, est sapien
        posuere nisi, id aliquet mi lorem eu felis. Donec sit amet neque et
        tellus mollis suscipit. Nam molestie bibendum consequat. Fusce a
        fermentum tellus, sed aliquet neque. Curabitur blandit dui egestas nisi
        vestibulum, tempor blandit massa dapibus. Duis eget laoreet metus. Proin
        interdum urna erat, id commodo massa varius vitae. In hac habitasse
        platea dictumst. In auctor scelerisque maximus. Etiam enim justo,
        faucibus et neque sit amet, malesuada dignissim nunc. Curabitur
        ullamcorper egestas purus, nec imperdiet est viverra eu. Orci varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec in varius dui. Sed egestas, metus eu vulputate mattis, metus
        dolor porta nulla, ut volutpat justo purus eu justo. Duis hendrerit,
        quam eu pellentesque viverra, enim erat mattis eros, ac suscipit dolor
        nulla quis risus. Quisque maximus sem et rutrum rutrum. Fusce efficitur
        a diam at suscipit. Aliquam vel nunc accumsan, aliquet lacus eget,
        imperdiet ante. Cras sagittis interdum efficitur. Curabitur turpis
        sapien, commodo in massa a, sodales luctus arcu.
      </Modal>
    </>
  )
}

function NestedModal() {
  const [visible, setVisible] = React.useState(false)
  const [nestedModalVisible, setNestedModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        dividers
        closable
      >
        <div className="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </div>
        <Button onClick={() => setNestedModalVisible(true)}>
          Open Nested Modal
        </Button>
        <Modal
          visible={nestedModalVisible}
          onRequestClose={() => setNestedModalVisible(false)}
          title="Nested Modal"
          dividers
          closable
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </Modal>
      </Modal>
    </>
  )
}

function NestedModal() {
  const [visible, setVisible] = React.useState(false)
  const [nestedModalVisible, setNestedModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title="Default Modal"
        dividers
        closable
      >
        <div className="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </div>
        <Button onClick={() => setNestedModalVisible(true)}>
          Open Nested Modal
        </Button>
        <Modal
          visible={nestedModalVisible}
          onRequestClose={() => setNestedModalVisible(false)}
          title="Nested Modal"
          dividers
          closable
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida
          lorem nec velit egestas, quis varius mi condimentum. Nulla risus
          velit, imperdiet at pharetra a, eleifend eget massa. Donec porta purus
          eu ex hendrerit sagittis. Vestibulum eget mattis tellus, a dapibus
          nisi.
        </Modal>
      </Modal>
    </>
  )
}

function AlertModal() {
  const [visible, setVisible] = React.useState(false)
  const modalTitle = React.useMemo(() => {
    return (
      <p className="px-6 pt-4 pb-3 text-xl font-semibold text-gray-900">
        Use Google's location service?
      </p>
    )
  }, [])
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title={modalTitle}
        okButtonProps={{ children: 'AGREE', buttonType: 'link' }}
        cancelButtonProps={{ children: 'DISAGREE', buttonType: 'link' }}
      >
        <p className="text-base px-2 text-gray-600">
          Let Google help apps determine location. This means sending anonymous
          location data to Google, even when no apps are running.
        </p>
      </Modal>
    </>
  )
}

function AlertModal() {
  const [visible, setVisible] = React.useState(false)
  const modalTitle = React.useMemo(() => {
    return (
      <p className="px-6 pt-4 pb-3 text-xl font-semibold text-gray-900">
        Use Google's location service?
      </p>
    )
  }, [])
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        title={modalTitle}
        okButtonProps={{ children: 'AGREE', buttonType: 'link' }}
        cancelButtonProps={{ children: 'DISAGREE', buttonType: 'link' }}
      >
        <p className="text-base px-2 text-gray-600">
          Let Google help apps determine location. This means sending anonymous
          location data to Google, even when no apps are running.
        </p>
      </Modal>
    </>
  )
}

Editable Example

Optional Sizes

function OptionalSizes() {
  const [visible, setVisible] = React.useState(false)
  const [size, setSize] = React.useState('sm')
  const options = [
    { label: 'sm: 640px', value: 'sm' },
    { label: 'md: 768px', value: 'md' },
    { label: 'lg: 1024px', value: 'lg' },
    { label: 'xl: 1280px', value: 'xl' },
    { label: '2xl: 1536px', value: '2xl' },
  ]
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        maxWidth={size}
        title="Optional sizes"
      >
        <div className="flex flex-col space-y-4 items-center">
          <p className="text-lg">
            You can set the maximum width of this modal.
          </p>
          <Select
            className="w-48"
            options={options}
            value={size}
            onChange={setSize}
          />
        </div>
      </Modal>
    </>
  )
}

function OptionalSizes() {
  const [visible, setVisible] = React.useState(false)
  const [size, setSize] = React.useState('sm')
  const options = [
    { label: 'sm: 640px', value: 'sm' },
    { label: 'md: 768px', value: 'md' },
    { label: 'lg: 1024px', value: 'lg' },
    { label: 'xl: 1280px', value: 'xl' },
    { label: '2xl: 1536px', value: '2xl' },
  ]
  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onRequestClose={() => setVisible(false)}
        maxWidth={size}
        title="Optional sizes"
      >
        <div className="flex flex-col space-y-4 items-center">
          <p className="text-lg">
            You can set the maximum width of this modal.
          </p>
          <Select
            className="w-48"
            options={options}
            value={size}
            onChange={setSize}
          />
        </div>
      </Modal>
    </>
  )
}

Name	Description	Default Value
title	title of the modal `ReactNode`	--
children	content rendered inside the modal `ReactNode`	--
closable	Whether a close (x) button is visible on top right of the Modal or not `boolean \| undefined`	--
onOK	function called on "OK" button click `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`	--
onCancel	function called on "Cancel" button click `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`	--
okButtonProps	additional props passed to OK button excluding `onClick` `ActionButtonProps \| undefined`	--
cancelButtonProps	additional props passed to Cancel button excluding `onClick` `ActionButtonProps \| undefined`	--
visible	whether modal is visible or not `boolean \| undefined`	--
onRequestClose	function called when the user is closing the modal, either by clicking on cancel button or overlay `(() => void) \| undefined`	--
actions	custom actions button instead of OK and Cancel `ReactNode`	--
dividers	Show dividers on top and bottom of Modal children `boolean \| undefined`	--
maxWidth	Change maxWidth of modal using breakpoints `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| undefined`	`sm`
portalParent	parent of the portal container `HTMLElement \| undefined`	`typeof window !== 'undefined' ? document.body : undefined`

General

Feedback

Data Display

Data Entry

Survey

Navigation

Usage

Optional Sizes