dev@localhost:~/tcss/installation

Installation Guide

Get started with terminal.css in your project

← Back to Components
01.

CDN Installation

Add these links to your HTML file:

<!-- In your <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.css" />
<!-- [Optional: Theme] -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/themes/gruvbox-dark.css" />
 
<!-- [Optional: Only for toast, FAQ component] -->
<script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.js"></script>

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

<script src="https://cdn.tailwindcss.com"></script>
02.

How to Use Components

To use any component, simply:

  1. Go to the Components page
  2. Press F12 to open DevTools
  3. Inspect the component and copy the HTML code
  4. 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Terminal App</title>
<!-- terminal.css Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.css">
<!-- Optional: Tailwind for layout utilities -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="title is-1 has-text-primary">Hello Terminal!</h1>
<button class="button is-primary">Click Me</button>
<!-- terminal.css JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.js"></script>
</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 ;
}
View All Components Ready to build...