meowtern

Terminal UI for Tailwind CSS v4 - Aerospace mission control aesthetics.

A framework-agnostic CSS plugin for building terminal/mission-control style interfaces. Pure CSS, no JavaScript runtime. Works with React, Svelte, Vue, plain HTML - anything that uses Tailwind.

Live Demo & Documentation

Installation

With a build step (recommended)

bun add @alexcatdad/meowtern

Then import in your CSS:

@import "tailwindcss";
@import "@alexcatdad/meowtern/meowtern.css";

Wrap your app (or section) in .tui-root:

<div class="tui-root" data-theme="dark">
  <!-- meowtern UI -->
</div>

CDN (testing / prototyping only)

For quick testing or prototyping, you can use the pre-compiled stylesheet. This includes all meowtern classes and skips Tailwind's tree-shaking, so it's not recommended for production:

<link rel="stylesheet" href="https://alexcatdad.github.io/meowtern/meowtern.min.css">

Usage

<div class="tui-root" data-theme="dark">
  <div class="tui-panel">
    <span class="tui-badge tui-badge-type-1">STATUS</span>
    <h2 class="tui-text tui-text-bold">System Online</h2>
    <button class="tui-btn tui-btn-primary">Deploy</button>
  </div>
</div>

Legacy Global Mode

If you want the old global reset/body styling behavior, use the legacy entrypoint:

@import "@alexcatdad/meowtern/meowtern-legacy.css";

Or legacy base (without built-in theme presets):

@import "@alexcatdad/meowtern/meowtern-legacy-base.css";

Features

• 25+ component classes (panels, badges, buttons, inputs, tables, etc.)
• Aerospace background effects (scan lines, radar, particles)
• 16 ANSI terminal colors + semantic colors
• Dark/light theme support via data-theme attribute
• Responsive design with mobile optimizations
• prefers-reduced-motion respected automatically

Components

Text

<span class="tui-text">Default</span>
<span class="tui-text tui-text-dim">Muted</span>
<span class="tui-text tui-text-bold">Bold</span>
<span class="tui-text-success">Success</span>

Panels

<div class="tui-panel">Basic panel with corner brackets</div>
<div class="tui-panel tui-panel-raised">Elevated</div>

Buttons

<button class="tui-btn">Default</button>
<button class="tui-btn tui-btn-primary">Primary</button>
<button class="tui-btn tui-btn-ghost">Ghost</button>

Badges

<span class="tui-badge tui-badge-type-1">Blue</span>
<span class="tui-badge tui-badge-type-2">Purple</span>
<span class="tui-badge tui-badge-type-3">Green</span>

Effects

<div class="tui-effect-scan"></div>      <!-- horizontal sweep -->
<div class="tui-effect-radar"></div>     <!-- corner radar -->
<div class="tui-effect-particles"></div> <!-- floating dots -->

Customization

Override colors via standard Tailwind config:

@theme {
  --color-terminal-accent: #ff00ff;
}

Or use CSS variables:

:root {
  --tui-accent: #ff00ff;
}

Development

bun install
bun run dev        # Watch demo
bun run build:demo # Build demo for GitHub Pages
bun run build:cdn  # Build standalone CDN stylesheet
bun run lint       # Lint with Biome

License

MIT