Terminal-Inspired CSS Library for Retro Web UI – WebTUI

WebTUI is a modular CSS library that gives your web projects the distinct look and feel of a Terminal User Interface (TUI).

It’s not a full-blown framework like Bootstrap or Tailwind; think of it more as a focused styling layer.

Its main function is to provide base styles, components, and utilities that evoke that classic terminal vibe using modern CSS features like layers.

Features:

• Modular Design: Import only the CSS components and utilities you actually need. Keeps things lightweight.
• CSS Layer Control: Leverages @layer for predictable style precedence. This drastically reduces the need for !important hacks.
• Minimal Markup: Designed to work with simple HTML structures and attributes, avoiding excessive class names.
• Theming: Comes with basic light/dark modes and supports theme plugins (like Catppuccin, Nord) or custom CSS variables.
• Plugins: Extend functionality with things like Nerd Font icons for specific components.
• Pure CSS: It provides the styles; you still structure your HTML and might write some layout CSS.

How to use it:

1. Install the package using your preferred package manager:

bun add @webtui/css
npm install @webtui/css
yarn add @webtui/css
pnpm add @webtui/css

2. In your main CSS file (e.g., global.css, index.css), you must define the layer order before any WebTUI imports. This tells the browser how to prioritize the styles.

/* Define the layers first */
@layer base, utils, components;

/* Import the base styles */
@import "@webtui/css/base.css";

/* Now import only the utilities and components you need */

/* Utils */
@import "@webtui/css/utils/box.css"; /* For box borders */

/* Components */
@import "@webtui/css/components/button.css";
@import "@webtui/css/components/typography.css";
@import "@webtui/css/components/badge.css";
@import "@webtui/css/components/input.css";

/* If using a theme plugin, import it last */
@import "@webtui/theme-catppuccin"; 
@import '@webtui/theme-nord';

/* If using the Nerd Font plugin, import it after components/themes */
@import "@webtui/plugin-nf";

3. Or load the library from a CDN.

<style>
  @layer base, utils, components;
</style>
<!-- Import specific versions from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/css@VERSION/dist/base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/css@VERSION/dist/utils/box.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/css@VERSION/dist/components/button.css" />
<!-- Add other components/themes/plugins as needed -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/theme-catppuccin@VERSION/dist/index.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/plugin-nf@VERSION/dist/index.css" />
</head>

<!-- Full Library Import: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webtui/css@VERSION/dist/full.css" />

4. WebTUI applies styles based on standard HTML elements and custom attributes like is-, box-, variant-, size-, and cap-.

• Typography: Styles h1–h6, p, a, code, etc. Import @webtui/css/components/typography.css.
• Badge: Use <span is-="badge">. Customize with variant- (matches theme colors). Extend styles via CSS variables (--badge-color, --badge-text) or add new variants in the components layer. Nerd Font plugin adds cap- attribute for different end styles. Import @webtui/css/components/badge.css.
• Button: Use <button> or any element with is-="button". Customize with variant-, size-. Use box- (requires @webtui/css/utils/box.css) for borders (square, round, double). Style via --button-primary, --button-secondary. Import @webtui/css/components/button.css.
• Input: Styles <input>. For box- borders, wrap the input in a <div box-="..."> because inputs don’t support pseudo-elements needed for the box effect. Alternatively, use <div contenteditable box-="...">. Import @webtui/css/components/input.css.

<!-- Typography (styles H1-H6, p, etc.) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>Some text with <code>inline code</code> and a <a href="#">link</a>.</p>

<!-- Button -->
<button>Default Button</button>
<button variant-="foreground1">Colored Button</button>
<button size-="small">Small Button</button>
<button disabled>Disabled</button>

<!-- Button with Box Utility -->
<button box-="square">Square Border</button>
<button box-="round" variant-="background2">Round & Colored</button>

<!-- Badge -->
<span is-="badge">Info</span>
<span is-="badge" variant-="foreground2">Low Priority</span>

<!-- Input (requires wrapping for box-) -->
<div box-="round">
  <input type="text" placeholder="Enter text..." />
</div>

<!-- Box Utility on a Div -->
<div box-="double">
  <p>Content inside a double-lined box.</p>
</div>

5. Check out the official documentation for more usage of Themes and Plugins.

The post Terminal-Inspired CSS Library for Retro Web UI – WebTUI appeared first on CSS Script.