meowtern

A Tailwind CSS v4 plugin for terminal and aerospace mission control UI components. Pure CSS, framework-agnostic, zero JavaScript runtime.

Pure CSS

No JavaScript runtime. Works everywhere CSS works.

Tailwind v4 Native

Built with @theme and @utility directives.

Framework Agnostic

React, Vue, Svelte, or plain HTML.

Accessible

prefers-reduced-motion and WCAG contrast.

Requirements

Tailwind CSS v4.0 or higher
Node.js 18+ (for build tools)

Install from GitHub

Package Manager

# Using bun
bun add /meowtern

# Using npm
npm install /meowtern

# Using pnpm
pnpm add /meowtern

Import in your CSS

styles.css

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

Note: meowtern must be imported after Tailwind CSS base styles.

CDN (testing / prototyping only)

For quick testing or prototyping, use the pre-compiled stylesheet. This includes all classes without tree-shaking, so use the npm install path for production:

HTML

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

Note: The CDN build includes all meowtern classes (~46KB). For production, use the npm install path so Tailwind tree-shakes to only the classes you use.

Here's a minimal example to get you started:

Example Page

System Status

Status ONLINE

CPU 45%

<div class="tui-panel tui-p-panel">
  <h3>System Status</h3>
  <div class="tui-specs">
    <div class="tui-spec">
      <span class="tui-spec-label">Status</span>
      <span class="tui-badge tui-badge-success tui-badge-no-dot">ONLINE</span>
    </div>
    <div class="tui-spec">
      <span class="tui-spec-label">CPU</span>
      <span class="tui-spec-value">45%</span>
    </div>
  </div>
  <button class="tui-btn tui-btn-primary tui-btn-sm">View Details</button>
</div>

Text Variants

Default text Dim text Bold text

Semantic Colors

Success Warning Error Info

Labels & Code

TECHNICAL LABEL inline_code()

API Reference

Class	Description
`.tui-text`	Base text style with proper color
`.tui-text-dim`	Dimmed/muted text
`.tui-text-bold`	Bold weight text
`.tui-text-success`	Green success color
`.tui-text-warning`	Yellow warning color
`.tui-text-error`	Red error color
`.tui-text-info`	Cyan info color
`.tui-label`	Uppercase technical label
`.tui-code`	Inline code styling

Headings

Heading 1 — Display

Heading 2 — Display

Heading 3 — Display

Heading 4 — Mono

Heading 5 — Mono Uppercase

Heading 6 — Mono Uppercase

Links

Default Link Subtle Link Nav Link

Lists

Primary system online
Backup system standby
- Node A: active
- Node B: idle
Network nominal

Initialize core systems
Run diagnostic checks
Engage primary thrusters

Blockquote

System log: All subsystems reporting nominal. Telemetry data within expected parameters.

Warning: Fuel reserves below 20%. Recommend initiating conservation protocol.

Keyboard Shortcuts

Press Ctrl + C to abort Press Esc to close

API Reference

Class	Description
`.tui-h1` – `.tui-h6`	Heading hierarchy (display → mono at h4)
`.tui-link`	Accent-colored terminal link
`.tui-link-subtle`	Muted link, accent on hover
`.tui-link-nav`	Navigation link, underline on hover
`.tui-list`	Unordered list with ▸ markers
`.tui-list-ordered`	Ordered list with zero-padded counters
`.tui-blockquote`	Terminal-styled blockquote
`.tui-blockquote-warn`	Warning variant (yellow border)
`.tui-kbd`	Keyboard shortcut display

Variants

Status Variants

Sizes

API Reference

Class	Description
`.tui-btn`	Base button (required)
`.tui-btn-primary`	Accent colored button
`.tui-btn-secondary`	Subtle secondary style
`.tui-btn-ghost`	Transparent background
`.tui-btn-success`	Green success button
`.tui-btn-danger`	Red danger button
`.tui-btn-sm`	Small size
`.tui-btn-lg`	Large size

Type Variants

DEFAULT TYPE 1 TYPE 2 TYPE 3 TYPE 4 TYPE 5 TYPE 6

Status Badges

SUCCESS WARNING DANGER

Without Dot

v1.0.0 ONLINE OFFLINE

Panel Variants

Default Panel

Corner brackets glow on hover.

Raised

Sunken

Surfaces

Surface

CRT Surface

With scanline effect

user@host ~

Form Group

Callsign Alphanumeric, 3-12 characters

Mission Brief

Select

Sector

Input with Suffix

File Input

Upload Config Accepted: .json, .yaml

Drop logs here or click to browse Maximum upload size: 50MB

Checkbox & Radio

Navigation systems Weapons array Warp drive (offline)

Critical Standard Low

Toggle Switch

Shields active Stealth mode Hyperdrive (locked)

Range Slider

Thrust Level

Validation States

Access Code Error: Access code not recognized

Frequency

Filter Chips

INFO 128 WARN 42 ERROR 7 DEBUG

Orbit Comms Power Critical

API Reference

Class	Description
`.tui-form-group`	Wraps label + input + hint/error
`.tui-form-label`	Uppercase mono label for form fields
`.tui-form-hint`	Help text below input
`.tui-form-error`	Error message below input
`.tui-textarea`	Multi-line text input
`.tui-select`	Styled native select dropdown
`.tui-file-input`	Styled native file input with terminal-themed picker button
`.tui-file-drop`	Dashed drag-and-drop upload zone wrapper
`.tui-input-suffix`	Right-aligned unit/label inside input
`.tui-checkbox`	Styled checkbox
`.tui-radio`	Styled radio button
`.tui-toggle`	Toggle switch (checkbox variant)
`.tui-range`	Styled range slider
`.tui-filter`	Scrollable horizontal filter chip row
`.tui-filter-chip`	Selectable filter chip item
`.tui-input-error`	Error border state for inputs
`.tui-input-success`	Success border state for inputs
`.tui-file-input-error`	Error border state for file inputs
`.tui-file-input-success`	Success border state for file inputs

Data Bars

Metric Cards

Total Devices

ALL

Spec Grid

CPU Intel Core i9

RAM 64GB

Storage 2TB NVMe

Device status overview
Device	Status	CPU
Server-01	ONLINE	45%
Server-02	MAINTENANCE	12%

Terminal

$ echo "Hello, meowtern!" Hello, meowtern!

Tab panel content here.

Alerts

Telemetry link established. All channels nominal.

Mission objective completed successfully.

Solar interference detected. Signal degradation possible.

Critical: Hull breach detected in sector 7.

Toasts

System update applied

Deploy complete

Connection lost

Progress Bar

Upload — 75%

Fuel — 30%

Shields — 12%

Radial Progress

42%

CPU

68%

RAM

84%

DISK

91%

SHIELD

Skeleton Loading

Empty State

∅

No transmissions found

Adjust your frequency range or check antenna alignment.

Breadcrumb

Pagination

Steps

1 Preflight

2 Launch

3 Orbit

Navbar

Menubar

Vertical Menu

Avatars

JD AK MN CP OK WN ER

A B C D

Indicators

7 AL

NEW

Description List

Callsign: Eagle One
Frequency: 147.300 MHz
Status: Active

Device List

Relay Node AX-17 Uplink stable • Last heartbeat 3s ago

ONLINE

Telemetry Bus BX-09 Packet latency elevated on channel 4

WARN

Control Link CX-02 No response from secondary interface

DOWN

■

Orbital Sync Completed 2 minutes ago

■

Backup Snapshot Queued

queued

Card

Subsystem A

Core temperature nominal. All readings within expected bounds.

Subsystem B

Backup power engaged. Primary circuit under maintenance.

Button Group

Join

LIVE

Centered Hero

Mission Briefing

Launch Sequence Ready

Initialize telemetry links, verify crew systems, and deploy with full visibility across every subsystem.

Split Hero

Orbital Program

Realtime System Intelligence

Track trajectories, monitor anomalies, and coordinate teams from a single tactical surface.

System Requirements

Tailwind CSS v4.0 or higher. No JavaScript runtime required. Works with any frontend framework.

Installation

Install via npm or bun, then import the CSS file after your Tailwind import.

Browser Support

All modern browsers. Animations respect prefers-reduced-motion automatically.

Glow

Glow LG

Glass

Pulse Glow

Performance: Effects are automatically hidden on mobile and when prefers-reduced-motion is enabled.

Effect Classes

<!-- Add to body for ambient effects -->

<!-- Horizontal scan line sweep -->
<div class="tui-effect-scan"></div>

<!-- Corner radar rotation -->
<div class="tui-effect-radar"></div>

<!-- Floating particle dots -->
<div class="tui-effect-particles"></div>

<!-- Horizontal data streams -->
<div class="tui-effect-streams"></div>

<!-- Center expanding ring -->
<div class="tui-effect-pulse"></div>

<!-- Blinking grid nodes -->
<div class="tui-effect-grid-nodes"></div>

<!-- Corner bracket accents -->
<div class="tui-corners"></div>

meowtern ships with 10 theme presets. Set the data-theme attribute on <html> to switch.

Available Themes

<!-- Dark themes -->
<html data-theme="dark">            <!-- Default cyan/navy -->
<html data-theme="amber">           <!-- Warm CRT terminal -->
<html data-theme="matrix">          <!-- Green phosphor -->
<html data-theme="high-contrast">   <!-- WCAG AAA accessible -->
<html data-theme="deep-space">      <!-- Muted purple/blue -->

<!-- Light themes -->
<html data-theme="light">
<html data-theme="amber-light">
<html data-theme="matrix-light">
<html data-theme="high-contrast-light">
<html data-theme="deep-space-light">

JavaScript Switcher

<script>
function setTheme(name) {
  document.documentElement.setAttribute('data-theme', name);
}
</script>

Try it now — use the theme selector in the sidebar to preview all themes live.

Core Variables

:root {
  /* Colors */
  --tui-bg: #080b18;
  --tui-surface: #0c1122;
  --tui-border: rgba(21, 241, 255, 0.15);
  --tui-accent: #15f1ff;

  /* Text */
  --tui-text: #e4e4e7;
  --tui-text-dim: #71717a;

  /* Typography */
  --tui-font-mono: 'IBM Plex Mono', monospace;
  --tui-font-display: 'Outfit', sans-serif;

  /* Spacing */
  --tui-radius: 4px;
  --tui-space-1: 0.25rem;
  --tui-space-2: 0.5rem;
  --tui-space-3: 0.75rem;
  --tui-space-4: 1rem;

  /* Timing */
  --tui-duration: 200ms;
  --tui-duration-fast: 100ms;
  --tui-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

black

red

green

yellow

blue

magenta

cyan

white

Using Colors

<!-- Via CSS variables -->
<div style="color: var(--tui-cyan);">Cyan text</div>

<!-- Via Tailwind classes (from @theme) -->
<div class="text-tui-cyan">Cyan text</div>
<div class="bg-tui-blue">Blue background</div>

v1.0.0 Initial Release

Core component library: buttons, badges, panels, inputs
Data display components: data bars, metrics, specs, tables
Window and tab components
Aerospace background effects
Glow and animation utilities
Dark and light theme support
Tailwind v4 CSS-first architecture

meowtern

Requirements

Install from GitHub

Import in your CSS

CDN (testing / prototyping only)

System Status

Text Variants

Semantic Colors

Labels & Code

API Reference

Headings

Links

Lists

Blockquote

Keyboard Shortcuts

API Reference

Variants

Status Variants

Sizes

API Reference

Type Variants

Status Badges

Without Dot

Panel Variants

Surfaces

Form Group

Select

Input with Suffix

File Input

Checkbox & Radio

Toggle Switch

Range Slider

Validation States

Filter Chips

API Reference

Data Bars

Metric Cards

Spec Grid

Alerts

Toasts

Progress Bar

Radial Progress

Skeleton Loading

Empty State

Breadcrumb

Pagination

Steps

Navbar

Menubar

Vertical Menu

Avatars

Indicators

Tags

Description List

Device List

Card

Button Group

Join

Centered Hero

Launch Sequence Ready

Split Hero

Realtime System Intelligence