A component for using titled borders in Ink. It is an extension of the Box component of Ink.

The library uses the peer dependencies react and ink.

npm i @mishieck/ink-titled-box

bun add @mishieck/ink-titled-box

Note: Arrow borders do not work with the titles.

This is the same as that in Ink, except it is required.

An array of titles for the border.

The styles of titles as shown in Title Styles. Without styles, the titles have a transparent background and padded on both ends with a space. The value is an object with the following properties:

• start: the character before the title.
• end: the character after the title.

The library provides some title styles through the export titleStyles. You can create your own in addition to those. You can use the provided styles as follows:

import React from "react";
import {TitledBox, titleStyles} from "@mishieck/ink-titled-box";

const Demo: React.FC = () => (
    <TitledBox
        borderStyle="single"
        titles={["Demo"]}
        titleStyles={titleStyles.rectangle}
    />
);

Note: apart from titleStyles.rectangle, all other styles use Nerd Fonts. So, if you do not have Nerd Fonts installed, you will not get the expected results.