Caret-Tui

Overlay

An absolute positioned overlay to mask underlying content.

The Overlay component renders content on top of your existing layout while blocking out the background. This is particularly useful for modals, dialogue boxes, and popups in the terminal.

Usage

import { Overlay, Box, Text } from 'caret-tui';

const App = () => (
  <Overlay isOpen={true}>
    <Box borderStyle="round" borderColor="primary" paddingX={2}>
      <Text>I am a popup!</Text>
    </Box>
  </Overlay>
);

Props

PropTypeDefaultDescription
isOpenboolean-Determines if the overlay is rendered.
childrenReact.ReactNode-The content to display inside the overlay.

On this page