Catalog

Each component and background installs as plain source into components/asciicn/. Drop one into your page as it is, read its source to see how it's made, or point your agent at one and ask for a variation. For anything not here, ask your agent or write your own. To try looks before you install, open the Studio.

Using a component

Install any component by name. It brings the parts of the engine it needs the first time:

Backgrounds fill the box you give them. Put one behind your content with absolute inset-0:

Copyimport { Nebula } from "@/components/asciicn/nebula";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <Nebula charset="braille" className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

Components that draw on the engine share these look props:

Terminal and UI pieces take a color from the named palette and their own content props. Each page lists every prop.