asciium

Premium monochrome terminal UI system for React + Tailwind CSS. Build retro-futurist, ASCII-art portfolios and dashboards that feel like a high-end AI research lab.

Features

• 60+ optimized React components
• Pure CSS ASCII borders, cursors, scanlines and noise
• Monochrome premium palette (#050505, #E8E8E8, #8A8A8A, #AFAFAF)
• GPU-friendly animations (only transform / opacity)
• React.memo + useMemo + IntersectionObserver reveal
• contain / will-change paint isolation
• prefers-reduced-motion support
• Full TypeScript support
• Tree-shakeable ESM + CJS builds
• Zero runtime dependencies (React + Tailwind as peers)

Requirements

• React 18+
• Tailwind CSS 4+
• Node.js 18+

Installation

npm install asciium
# or
pnpm add asciium
# or
bun add asciium

Quick Start

1. Import the stylesheet

In your main CSS file:

@import "asciium/styles";

2. (Optional) Add the Tailwind plugin

If you want access to asciium theme tokens and utility classes:

// tailwind.config.js
import asciiPlugin from "asciium/plugin";

export default {
  plugins: [asciiPlugin],
};

3. Use components

import {
  ASCIINav,
  ASCIIHero,
  ASCIICard,
  ASCIIArtText,
  ASCIILiveMetrics,
} from "asciium";

function App() {
  return (
    <div className="bg-au-bg min-h-screen font-mono">
      <ASCIINav
        items={[
          { label: "home", href: "#home", number: 1 },
          { label: "work", href: "#work", number: 2 },
        ]}
      />

      <ASCIIHero prompt="whoami" title="SERGIO LAZARO" subtitle="IA DEV" />

      <ASCIICard
        number={1}
        title="DocuMind"
        subtitle="< RAG · NLP · FastAPI >"
        description="Chat with documents using RAG and embeddings."
        tags={["Python", "FastAPI", "OpenAI"]}
      />

      <ASCIILiveMetrics
        metrics={[
          { label: "Models Deployed", value: "27" },
          { label: "Tokens Processed", value: "4.2B" },
        ]}
      />
    </div>
  );
}

Components

Core

| Component | Description | |-----------|-------------| | <ASCIIBorder> | Border wrapper with ASCII corners | | <ASCIIBox> | Box with optional title bar | | <ASCIIDivider> | Section divider with // prefix | | <ASCIICursor> | Blinking terminal cursor | | <ASCIITag> | Label/tag pill | | <ASCIINumberLabel> | [01] style label | | <ASCIIComment> | // comment text |

Layout

| Component | Description | |-----------|-------------| | <ASCIINav> | Sticky 80px nav with numbered links + terminal prompt | | <ASCIIHero> | Hero section with line numbers and prompt | | <ASCIIPrompt> | Terminal prompt / output | | <ASCIIFooter> | Minimal footer |

Display

| Component | Description | |-----------|-------------| | <ASCIICard> | Project card with ASCII icon slot | | <ASCIICardGrid> | Responsive grid | | <ASCIITechIcon> | ASCII tech logo | | <ASCIITechStack> | Responsive stack grid | | <ASCIIAbout> | Bio + stats + ASCII skill bars | | <ASCIIContact> | Contact links with arrows |

Art

| Component | Description | |-----------|-------------| | <ASCIIArtText> | 8-row giant ASCII letters | | <ASCIIDotArt> | Procedural dot pattern | | <ASCIIPortrait> | High-density circular ASCII portrait | | <ASCIIOrbitalRings> | CSS orbital ring HUD | | <ASCIIFloatingPanels> | Floating HUD info panels | | <ASCIILine> | Decorative ASCII line | | <ASCIICorner> | Corner decoration |

Logo Cards

| Component | Description | |-----------|-------------| | <ASCIILogoBox> | Auto-generated ASCII box from text | | <ASCIILogoCard> | Card with auto ASCII box + label | | <ASCIILogoGrid> | Responsive grid of logo cards |

Charts

| Component | Description | |-----------|-------------| | <ASCIIPieChart> | ASCII pie chart | | <ASCIIBarChartV> | Vertical bar chart | | <ASCIILineChart> | Line chart with ASCII grid | | <ASCIIAreaChart> | Area chart |

Interactive

| Component | Description | |-----------|-------------| | <ASCIIButton> | Terminal-style button | | <ASCIIInput> | Text input with prompt | | <ASCIITextarea> | Multi-line input | | <ASCIICheckbox> | Checkbox with [x] style | | <ASCIISwitch> | Toggle switch | | <ASCIIRadioGroup> | Radio button group |

Tabs

| Component | Description | |-----------|-------------| | <ASCIITabs> | Tab container | | <ASCIITabsList> | Tab button list | | <ASCIITabsTrigger> | Individual tab trigger | | <ASCIITabsContent> | Tab panel content |

Table

| Component | Description | |-----------|-------------| | <ASCIITable> | Table container | | <ASCIIDataTable> | Auto-generated data table |

Disclosure

| Component | Description | |-----------|-------------| | <ASCIIAccordion> | Collapsible accordion | | <ASCIICollapsible> | Simple collapsible section |

Feedback

| Component | Description | |-----------|-------------| | <ASCIIAlert> | Alert box with variants | | <ASCIISkeleton> | Loading skeleton | | <ASCIISpinner> | ASCII spinner | | <ToastProvider> | Toast notification system |

Overlay

| Component | Description | |-----------|-------------| | <ASCIIDialog> | Modal dialog | | <ASCIIAlertDialog> | Confirmation dialog | | <ASCIISheet> | Slide-in panel |

Navigation

| Component | Description | |-----------|-------------| | <ASCIIBreadcrumb> | Breadcrumb trail | | <ASCIISelect> | Dropdown select | | <ASCIISlider> | Range slider |

Premium

| Component | Description | |-----------|-------------| | <ASCIIResearchLogs> | Dated research log list | | <ASCIICaseStudy> | Case study with problem/process/result | | <ASCIILiveMetrics> | KPI stat cards | | <ASCIIContactTerminal> | Typing terminal contact block |

Performance

| Export | Description | |--------|-------------| | <ASCIIRevealSection> | Scroll-reveal wrapper | | useAsciiReveal | IntersectionObserver hook |

Theme

:root {
  --au-bg: #050505;
  --au-fg: #e8e8e8;
  --au-muted: #8a8a8a;
  --au-line: #afafaf;
  --au-accent: #ffffff;
}

Tailwind classes (with plugin):

bg-au-bg
text-au-fg
text-au-muted
border-au-line/20

Performance Notes

• All animations use transform and opacity only
• Heavy ASCII art is memoized with useMemo
• Components are wrapped in React.memo
• Sections use contain: layout style paint
• ASCIIRevealSection uses IntersectionObserver (no scroll listeners)
• prefers-reduced-motion disables animations

Contributing

# Clone the repo
git clone https://github.com/srsergio/xascii.git
cd xascii

# Install dependencies
bun install

# Start the demo
bun run dev:demo

# Build the library
bun run build

License

MIT © Sergio Lazaro