Terminal-style css components with Bulma css naming conventions
Subtitle 1
Subtitle 2
Subtitle 3
Subtitle 4
Subtitle 5
Subtitle 6
Monitoring and analytics for your terminal
Terminal glow effect
Blinking cursor
Divider separator
Card with content only.
Card with header and content.
| PID | Process | Status | CPU | Memory |
|---|---|---|---|---|
| 1024 | nginx.service | RUNNING | 2.4% | 128MB |
| 2048 | postgres.service | RUNNING | 12.8% | 512MB |
| 4096 | redis.service | IDLE | 0.1% | 64MB |
| 8192 | cron.service | STOPPED | 0.0% | 8MB |
terminal.css is a Terminal CSS Component Library that provides terminal-style components with Bulma naming conventions. It's designed for building retro/cyberpunk terminal-inspired interfaces.
Use Bulma-style modifiers with the is-* pattern
for components:
<button class="button
is-primary">Button</button>
For text colors, use has-text-* utilities:
<p class="has-text-danger">Error text</p>
No! All components work standalone. Tailwind is optional and
only recommended for layout utilities like grid,
flex, and gap.
terminal.css components have complete default styling and don't require any external dependencies.
Yes! You can combine modifiers just like Bulma:
<button class="button is-primary
is-loading">Submit</button>
<span class="tag is-danger
is-active">Error</span>
<h1 class="title is-3
has-text-success">Success!</h1>
Override CSS variables in your own stylesheet:
:root { --primary: #00ff00; --danger: #ff0000; }
Yes! All components are designed to work on different screen sizes. Use Tailwind's responsive utilities for layout control.