Installation - terminal.css

01.

CDN Installation

Add these links to your HTML file:

Optional: Add Tailwind CSS for layout utilities (flex, grid, spacing)

02.

How to Use Components

To use any component, simply:

Go to the Components page
Press F12 to open DevTools
Inspect the component and copy the HTML code
Paste it into your project

Or Vibe coding

Just drop the full Components page html code to the AI Model, tell it that flow the component usage

Complete HTML Template

<!DOCTYPE html>

<head>

<title>My Terminal App</title>

</head>

<body>

<h1 class="title is-1 has-text-primary">Hello Terminal!</h1>

<button class="button is-primary">Click Me</button>

</body>

</html>

03.

Customization

Override CSS variables to customize the theme:

/* In your custom stylesheet */

:root {

/* Change primary color */

--primary: #00ff00 ;

/* Change background */

--terminal-bg: #0a0a0a ;

/* Change font */

font-family: 'Courier New' , monospace;

/* Other variables */

--terminal-fg: #f0f0f0 ;

--danger: #ff5555 ;

--success: #50fa7b ;

--warning: #f1fa8c ;

--info: #8be9fd ;

--border-color: #333333 ;

--surface: #1a1a1a ;

--muted: #6c757d ;

}

04.

Theming

terminal.css includes a theming system that allows you to easily switch between different color schemes. The selected theme is persisted across pages using the browser's localStorage.

How to use themes:

Include the main index.css stylesheet and then a theme stylesheet in your <head> section. The theme stylesheet must have the ID theme-switcher.

To enable theme switching and persistence, include the index.js script at the end of your <body> tag. This script contains the necessary logic to manage themes.

You can then add a theme selector dropdown to your HTML, like this:

<option value="default">Default</option>

<option value="dracula">Dracula</option>

<option value="light">Light</option>

</select>