Gengar UI

Badge

Terminal-style status indicators and labels with pixel-perfect borders and glowing effects.

SYSTEM
WARNING
ERROR
SUCCESS
npm install
git status
yarn dev
process killed

Installation

npm install class-variance-authority lucide-react

Usage

import { Badge } from "@/components/ui/badge"
import { Terminal, AlertCircle, CheckCircle2, XCircle } from 'lucide-react'

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      {/* Status Badge */}
      <Badge className="gap-1">
        <Terminal className="h-3 w-3" />
        <span>SYSTEM</span>
      </Badge>

      {/* Process Badge */}
      <Badge variant="secondary">npm install</Badge>

      {/* Status Indicator */}
      <Badge 
        variant="outline" 
        className="h-5 w-5 p-0 flex items-center justify-center" 
      />
    </div>
  )
}
AvatarButton