For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. The asciicn agent skill, for building any ASCII effect on the engine, is at /.well-known/agent-skills/asciicn/SKILL.md.
asciicn
GitHub

ASCII card

PreviousNext

A card framed in box-drawing glyphs, with its title set into the top border and an optional glyph glow lighting it from an edge or a corner.

Controls
Frame
Glow
Glow glyphs
Colour
Interactive

Installation

pnpm dlx shadcn@latest add https://asciicn.dev/r/ascii-card.json

This also installs ascii-box, which draws the frame, and ascii-glow, which draws the glow.

Usage

import { AsciiCard } from "@/components/asciicn/ascii-card";
 
export function RuntimeCard() {
  return (
    <AsciiCard title="edge-runtime" footer="31 regions" glow="top-right">
      <p className="font-semibold">Cold starts under 40 ms</p>
    </AsciiCard>
  );
}

AsciiCard is an AsciiBox that fills its container's width, with a title set into the top border (┌─ Title ─────┐), an optional footer in the bottom border and a description line above the content. The title also names the card for screen readers.

glow lights the inside of the frame with an AsciiGlow from an edge, a corner or any point, drawn in the glyphs of glowCharset. The glow sits behind the content and fills the cells inside the frame exactly.

Set interactive on a card that holds a link or button. Hover or focus inside it turns the frame heavy and brightens the glow.

Examples

Glows

Three interactive cards lit from different sides in braille, block and katakana glyphs. Hover one, or tab to its link.

Status panel

A double frame with a medium shade shadow, a description and a count in the footer.

Props

PropTypeDefault
title

Set into the top border. Also names the card for screen readers.

Type: ReactNodeDefault –
description

A line of muted text above the content.

Type: ReactNodeDefault –
footer

Set into the bottom border, such as a status or a count.

Type: ReactNodeDefault –
glow

Where a glyph glow lights the card from: an edge, a corner, center, or an [x, y] point from 0 to 1.

Type: GlowPosition | "none"Default "none"
glowCharset

Glyphs the glow is drawn with.

Type: CharsetNameDefault "standard"
glowColor

Glow colour.

Type: AsciiColorDefault color
interactive

For clickable cards: hover and focus inside turn the frame heavy and brighten the glow.

Type: booleanDefault false
frame

Box-drawing set for the frame.

Type: "light" | "heavy" | "double" | "rounded" | "ascii"Default "light"
activeFrame

The frame while an interactive card is hovered or focused.

Type: "light" | "heavy" | "double" | "rounded" | "ascii"Default "heavy"
color

Frame colour, and the glow's unless glowColor is set.

Type: AsciiColorDefault "ink"
padding

Space inside the frame in rows; columns are doubled.

Type: numberDefault 1

AsciiCard takes every other AsciiBox prop (labelAlign, shadow, filled, cell) and passes the rest to the wrapping <div>.

Notes

  • The frame and glow are aria-hidden. The card is a group named by its title.
  • The glow pauses offscreen and in hidden tabs, and holds one still frame with reduced motion.
  • The interactive frame swaps glyph sets instantly, as a terminal redraws, with no transition to tune.
  • Without glow, the card draws no canvas and runs no animation.