@tuicomponents/list

Renders lists with support for bullets, numbers, tasks, and definitions

Installation

pnpm add @tuicomponents/list

Quick Start

import { createList } from "@tuicomponents/list";
import { createRenderContext } from "@tuicomponents/core";

const component = createList();
const context = createRenderContext();

const result = component.render(
  {
    items: [
      {
        text: "First item",
      },
      {
        text: "Second item",
      },
      {
        text: "Third item",
      },
    ],
    style: "bullet",
  },
  context
);
console.log(result.output);

Examples

bullet

Bulleted list

{
  "items": [
    {
      "text": "First item"
    },
    {
      "text": "Second item"
    },
    {
      "text": "Third item"
    }
  ],
  "style": "bullet"
}

numbered

Numbered list

{
  "items": [
    {
      "text": "Step one"
    },
    {
      "text": "Step two"
    },
    {
      "text": "Step three"
    }
  ],
  "style": "numbered"
}

nested

Nested list with sub-items

{
  "items": [
    {
      "text": "Project setup",
      "items": [
        {
          "text": "Install dependencies"
        },
        {
          "text": "Configure environment"
        }
      ]
    },
    {
      "text": "Development",
      "items": [
        {
          "text": "Write code"
        },
        {
          "text": "Run tests"
        }
      ]
    }
  ],
  "style": "bullet"
}

task

Task list with checkboxes

{
  "items": [
    {
      "text": "Complete documentation",
      "checked": true
    },
    {
      "text": "Write tests",
      "checked": false
    },
    {
      "text": "Review PR",
      "checked": "partial"
    }
  ],
  "style": "task"
}

definition

Definition list with terms

{
  "items": [
    {
      "term": "API",
      "definition": "Application Programming Interface"
    },
    {
      "term": "CLI",
      "definition": "Command Line Interface"
    },
    {
      "term": "TUI",
      "definition": "Terminal User Interface"
    }
  ],
  "style": "definition"
}

Configuration Options

| Property | Type | Required | Default | Description | | ----------- | ---------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | | items | object[] | ✓ | - | Array of list items | | style | string | | "bullet" | List style: "bullet", "dash", "arrow", "star", "numbered", "lettered", "roman", "none", "task", or "definition" | | indent | number | | 0 | Indentation level | | start | number | | 1 | Starting number for numbered lists | | termWidth | number | | - | Term width for definition lists |

Render Modes

The component supports three render modes:

• ANSI: Rich terminal output with colors and Unicode characters
• Markdown: Plain text suitable for AI assistants and documentation
• Grayscale: ANSI output without colors (for terminals that don't support color)

You can specify the render mode when creating the context:

import { createRenderContext } from "@tuicomponents/core";

// ANSI mode (default)
const ansiContext = createRenderContext({ renderMode: "ansi" });

// Markdown mode
const mdContext = createRenderContext({ renderMode: "markdown" });

// Grayscale mode
const grayscaleContext = createRenderContext({ renderMode: "grayscale" });

API

For detailed API documentation, see the API docs.

License

UNLICENSED