Installation Guide
Get started with terminal.css in your project
01.
CDN Installation
Add these links to your HTML file:
<!-- In your <head> section -->
<link rel="stylesheet" href="[CDN_LINK_HERE]" />
<!-- Before closing </body> tag -->
<!-- [Optional: Only for toast, FAQ component]
-->
<script src="[CDN_LINK_HERE]"></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:
-
Go to the
Components page
- Find the component you want to use
- Press F12 to open DevTools
-
Inspect the component and copy the HTML code
- Paste it into your project
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="[CDN_LINK_HERE]">
<!-- 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="[CDN_LINK_HERE]"></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
;
}