Ascii

Render text as ASCII art using figlet fonts in the terminal.

Terminal

Installation

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/ascii.json

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/ascii.json

pnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/ascii.json

bunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/ascii.json

Then install the required dependency:

npm install figlet

yarn add figlet

pnpm add figlet

bun add figlet

Usage

app/page.tsx

"use client";

import dynamic from "next/dynamic";

const Terminal = dynamic(() => import("./terminal"), {
  ssr: false,
});

export default function Home() {
  return <Terminal />;
}

app/terminal.tsx

"use client";

import { Box } from "ink";
import { InkXterm } from "ink-web";
import { Ascii } from '@/components/ui/ascii'
import figlet from 'figlet'
import standard from 'figlet/importable-fonts/Standard.js'
import "ink-web/css";
import "xterm/css/xterm.css";

// Register fonts at module load time (before component renders)
figlet.parseFont('Standard', standard)

export default function Terminal() {
  return (
    <InkXterm focus>
      <Box flexDirection="column">
        <Ascii text="Hello" />
      </Box>
    </InkXterm>
  )
}

The default font is Standard. To use other fonts, import them from figlet/importable-fonts/ and register with parseFont before rendering. Do not use figlet.preloadFonts() in browser environments - it attempts to fetch fonts via HTTP which won't work with bundled applications.

Props

Prop	Type	Default	Description
`text`	`string`	-	The text to render as ASCII art
`font`	`string`	`'Standard'`	The figlet font to use
`horizontalLayout`	`string`	`'default'`	Horizontal layout mode
`verticalLayout`	`string`	`'default'`	Vertical layout mode
`color`	`string`	-	Color of the ASCII art text

Examples

Basic ASCII Art

<Ascii text="Hello" />

With Color

<Ascii text="World" color="cyan" />

Different Fonts

<Box flexDirection="column" gap={1}>
  <Ascii text="Doom" font="Doom" />
  <Ascii text="Ghost" font="Ghost" />
</Box>

<Box flexDirection="column">
  <Ascii text="Welcome" font="Standard" color="green" />
</Box>

<Box flexDirection="column">
  <Ascii text="CLI App" font="Big" color="cyan" />
  <Text dimColor>Version 1.0.0</Text>
</Box>

Available Fonts

Figlet includes many built-in fonts. Some popular ones:

Standard (default)
Big
Mini
Slant
Banner
Block
Bubble
Digital
Ivrit
Lean
Script
Shadow
Small
Speed
Star Wars

See the figlet font gallery for more options.

Notes

Uses the figlet library which works in both Node.js and browsers
Font rendering is synchronous, so very long text may cause brief delays
Some fonts may not render all characters
Works seamlessly with Ink's layout system (Box, Text, etc.)