terminal-ui Svelte Themes

Terminal Ui

A terminal-themed, sci-fi styled UI component library for Svelte 5. Features CRT screen effects, matrix-style animations, and cyberpunk aesthetics.

Download

@aflansburg/terminal-ui

A terminal-themed, sci-fi styled UI component library for Svelte 5. Features CRT screen effects, matrix-style animations, and cyberpunk aesthetics.

See it in action

https://engabe.com

Features

  • Terminal-themed components - Buttons, containers, modals, and headers with authentic CRT/terminal styling
  • Rich animations - Scanlines, glitches, VHS effects, portal pulses, and matrix rain
  • Icon library - 12 pre-styled SVG icons
  • Design tokens - Consistent color palette and styling variables
  • TypeScript support - Full type definitions included
  • Responsive - Mobile-first design with responsive breakpoints
  • Svelte 5 ready - Built with latest Svelte features (runes, snippets)

Installation

npm install @aflansburg/terminal-ui

Or with pnpm:

pnpm add @aflansburg/terminal-ui

Usage

Import Styles

First, import the terminal theme CSS in your main app file:

/* In your app.css or main CSS file */
@import '@aflansburg/terminal-ui/styles';

Or import it in your Svelte layout:

<script>
  import '@aflansburg/terminal-ui/styles';
</script>

Components

TerminalButton

<script>
  import { TerminalButton } from '@aflansburg/terminal-ui';
</script>

<TerminalButton onclick={() => console.log('clicked')}>
  > EXECUTE_COMMAND
</TerminalButton>

<TerminalButton variant="disabled" size="lg">
  > SYSTEM_OFFLINE
</TerminalButton>

Props:

  • variant?: 'default' | 'disabled' | 'danger' - Button style variant
  • size?: 'sm' | 'md' | 'lg' - Button size
  • class?: string - Additional CSS classes
  • onclick?: (event: MouseEvent) => void - Click handler
  • disabled?: boolean - Disable button

TerminalContainer

<script>
  import { TerminalContainer } from '@aflansburg/terminal-ui';
</script>

<TerminalContainer bordered dark>
  <p class="terminal-font text-terminal-green">Content goes here</p>
</TerminalContainer>

<TerminalContainer portalBorder>
  <p>Portal-themed container with pulsing animation</p>
</TerminalContainer>

Props:

  • bordered?: boolean - Add terminal-green glowing border
  • portalBorder?: boolean - Add portal-themed pulsing border
  • dark?: boolean - Add dark background
  • class?: string - Additional CSS classes

TerminalHeader

<script>
  import { TerminalHeader } from '@aflansburg/terminal-ui';
</script>

<TerminalHeader
  title="C-137-INFO TERMINAL"
  subtitle="INTERDIMENSIONAL DATABASE"
/>

<TerminalHeader title="STATUS" centered={false} />

Props:

  • title: string - Header title text
  • subtitle?: string - Optional subtitle text
  • centered?: boolean - Center align text (default: true)
  • class?: string - Additional CSS classes

TerminalModal

<script>
  import { TerminalModal } from '@aflansburg/terminal-ui';

  let isOpen = $state(false);
</script>

<TerminalButton onclick={() => isOpen = true}>
  Open Modal
</TerminalButton>

<TerminalModal
  isOpen={isOpen}
  onClose={() => isOpen = false}
  title="SYSTEM MESSAGE"
  subtitle="ATTENTION REQUIRED"
>
  <p class="terminal-font text-terminal-green">
    Modal content goes here
  </p>
</TerminalModal>

Props:

  • isOpen: boolean - Control modal visibility
  • onClose: () => void - Close handler
  • title?: string - Modal title
  • subtitle?: string - Modal subtitle
  • showDataStream?: boolean - Show animated data stream background (default: true)

TerminalBootSequence

A full-screen terminal boot sequence animation that displays system initialization messages.

<script>
  import { TerminalBootSequence } from '@aflansburg/terminal-ui';

  let showBoot = $state(true);
</script>

<TerminalBootSequence
  shouldShow={showBoot}
  systemDesignation="ALPHA-7"
  onComplete={() => {
    showBoot = false;
    console.log('Boot sequence complete!');
  }}
/>

Props:

  • shouldShow?: boolean - Whether to show the boot sequence (default: true)
  • systemDesignation?: string - System designation text displayed in the sequence (default: 'UNKNOWN')
  • onComplete?: () => void - Callback fired when the boot sequence completes
  • lineDelay?: number - Delay between each line in milliseconds (default: 200)
  • completeDelay?: number - Delay before hiding after completion in milliseconds (default: 2000)

MatrixLyrics

A Matrix-style animated text overlay that displays lyrics or text in cascading or straight-line modes with glitch effects.

<script>
  import { MatrixLyrics } from '@aflansburg/terminal-ui';

  let showLyrics = $state(true);
  const songLyrics = "Wake up Neo The Matrix has you Follow the white rabbit";
</script>

<MatrixLyrics
  isActive={showLyrics}
  lyrics={songLyrics}
  mode="matrix"
/>

<!-- Or use straight mode for centered scrolling text -->
<MatrixLyrics
  isActive={showLyrics}
  lyrics={songLyrics}
  mode="straight"
/>

Props:

  • isActive?: boolean - Whether to show the lyrics overlay (default: false)
  • lyrics?: string - Space-separated lyrics text to display (default: "")
  • mode?: "matrix" | "straight" - Display mode:
    • "matrix": Words cascade down in columns Matrix-style
    • "straight": Words scroll down centered in a single line (default: "matrix")

Icons

All icons are exported and can be used directly:

<script>
  import {
    GitHubIcon,
    LinkedInIcon,
    YouTubeIcon,
    MenuIcon,
    CloseIcon,
    SunIcon,
    MoonIcon
  } from '@aflansburg/terminal-ui';
</script>

<GitHubIcon />
<GitHubIcon fill="#00ff41" className="w-8 h-8" />
<LinkedInIcon fill="#ffffff" />
<MenuIcon />

Icon Props: All icons accept the following props:

  • className?: string - Additional CSS classes
  • fill?: string - Fill color (each icon has a sensible default)

Available Sample Icons:

  • MenuIcon - Hamburger menu
  • CloseIcon - Close/X icon
  • GitHubIcon - GitHub logo
  • LinkedInIcon - LinkedIn logo
  • YouTubeIcon - YouTube logo
  • SunIcon - Sun/light mode
  • MoonIcon - Moon/dark mode
  • SkullIcon - Skull icon
  • RickAndMortyIcon - Rick and Morty themed
  • GreenCheckIcon - Checkmark
  • QuestionMarkIcon - Question mark
  • ClickMeIcon - Pointing hand

Theme & Design Tokens

Import and use design tokens in your components:

<script>
  import { colors, fonts, animations } from '@aflansburg/terminal-ui/theme';
</script>

<style>
  .my-element {
    color: {colors.terminalGreen};
    font-family: {fonts.terminal};
    animation: {animations.glitch};
  }
</style>

Available Tokens:

Colors:

colors.terminalGreen    // #00ff41
colors.terminalRed      // #d01b1b
colors.terminalBlue     // #4dabf7
colors.portalOrange     // #fd7e14
colors.neonPurple       // #be4bdb
colors.rickCyan         // #67e8f9
colors.citadelGray      // #1a1a1a

Fonts:

fonts.terminal  // 'JetBrains Mono', monospace
fonts.header    // 'Orbitron', sans-serif

Animations:

animations.scanlines
animations.terminalFlicker
animations.portalPulse
animations.glitch
animations.screenGlitch
// ... and more

CSS Utility Classes

The library includes many utility classes you can use directly:

Typography:

  • .terminal-font - Apply JetBrains Mono font
  • .sci-fi-header - Apply Orbitron font with uppercase styling
  • .ascii-art - Styled for ASCII art with glow effect

Effects:

  • .crt-screen - Full CRT screen effect with scanlines
  • .terminal-border - Green glowing border with flicker
  • .portal-border - Blue/orange pulsing border
  • .glitch-text - Subtle glitch animation
  • .glitch-text-strong - Strong glitch effect
  • .screen-glitch - Full screen distortion
  • .data-stream - Falling matrix-style text

Buttons:

  • .terminal-button - Green terminal button
  • .terminal-button-disabled - Red disabled button

Colors:

  • .text-terminal-green - Terminal green text
  • .text-terminal-red - Terminal red text
  • .text-portal-orange - Portal orange text
  • .text-neon-purple - Neon purple text

Overlays:

  • .vhs-glitch-overlay - VHS scan line effect
  • .matrix-runes-overlay - Matrix rune animation container
  • .matrix-bg - Subtle binary pattern background

Example: Complete Page

<script>
  import {
    TerminalButton,
    TerminalContainer,
    TerminalHeader,
    TerminalModal
  } from '@aflansburg/terminal-ui';
  import '@aflansburg/terminal-ui/styles';

  let modalOpen = $state(false);
</script>

<div class="crt-screen min-h-screen bg-black p-8">
  <div class="max-w-4xl mx-auto space-y-6">
    <TerminalHeader
      title="SYSTEM CONTROL PANEL"
      subtitle="C-137 TERMINAL INTERFACE"
    />

    <TerminalContainer bordered dark>
      <h2 class="sci-fi-header text-terminal-green text-2xl mb-4">
        Welcome to the Terminal
      </h2>
      <p class="terminal-font text-terminal-green">
        > System online and ready for commands
      </p>

      <TerminalButton
        onclick={() => modalOpen = true}
        class="mt-4"
      >
        > Open_System_Modal
      </TerminalButton>
    </TerminalContainer>
  </div>

  <TerminalModal
    isOpen={modalOpen}
    onClose={() => modalOpen = false}
    title="SYSTEM MESSAGE"
  >
    <p class="terminal-font text-terminal-green">
      This is a terminal-styled modal
    </p>
  </TerminalModal>
</div>

Responsive Design

All components are mobile-first and responsive:

  • ASCII art and headers scale appropriately
  • Modals adapt to screen size
  • Touch-friendly button sizes on mobile
  • Breakpoints: 480px (mobile), 640px (tablet), 768px (desktop)

Browser Support

  • Modern browsers with CSS Grid and Custom Properties support
  • Chrome/Edge 88+
  • Firefox 85+
  • Safari 14+

License

MIT

Author

Abram Flansburg

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes