Cyberpunk Neon UI Kit

28 dark components with glowing neon-cyan accents — buttons, alerts, inputs, modals and more — for sci-fi, gaming and hacker-themed interfaces.

28 components · live preview · copy as HTML or JSX · free for commercial use

Cyberpunk buttons

Primary Button

Cyberpunk · Buttons

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-all">
  Primary Button
</button>
</div>

Outline Button

Cyberpunk · Buttons

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button class="bg-transparent text-cyan-300 border border-cyan-400 rounded-lg px-4 py-2 text-sm font-semibold transition-colors">
  Outline Button
</button>
</div>

Icon Button

Cyberpunk · Buttons

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>
</div>

Accent Button

Cyberpunk · Buttons

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button class="bg-slate-900 text-cyan-400 rounded-lg px-5 py-2.5 text-sm font-bold shadow-[0_0_15px_rgba(34,211,238,0.6)] transition-all">
  Get Started
</button>
</div>

Cyberpunk badges

Status Pill

Cyberpunk · Badges

Active

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <span class="inline-flex items-center gap-1.5 bg-slate-900 text-cyan-400 rounded-lg px-2.5 py-1 text-xs font-bold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>
</div>

Notification Badge

Cyberpunk · Badges

🔔 3

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300/70">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-slate-900 text-cyan-400 text-[10px] font-bold">3</span>
</span>
</div>

Cyberpunk cards

Basic Card

Cyberpunk · Cards

Card Title

A short description of this card's content goes here.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-5 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  <h3 class="text-sm font-bold text-cyan-300 mb-1">Card Title</h3>
  <p class="text-xs text-cyan-300/70">A short description of this card's content goes here.</p>
</div>
</div>

Profile Card

Cyberpunk · Cards

Jane Doe

Product Designer

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-5 shadow-[0_0_15px_rgba(34,211,238,0.6)] flex items-center gap-4">
  <div class="w-12 h-12 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">JD</div>
  <div>
    <p class="text-sm font-bold text-cyan-300">Jane Doe</p>
    <p class="text-xs text-cyan-300/70">Product Designer</p>
  </div>
</div>
</div>

Pricing Card

Cyberpunk · Cards

Pro

$19/mo

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-6 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  <p class="text-xs font-bold text-cyan-300 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-bold text-cyan-300 mb-4">$19<span class="text-sm text-cyan-300/70">/mo</span></p>
  <button class="w-full bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
    Choose Plan
  </button>
</div>
</div>

Cyberpunk alerts

Info Alert

Cyberpunk · Alerts

ℹ️ This is an informational message.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  ℹ️ This is an informational message.
</div>
</div>

Success Alert

Cyberpunk · Alerts

✅ Your changes have been saved.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  ✅ Your changes have been saved.
</div>
</div>

Warning Alert

Cyberpunk · Alerts

⚠️ This action can't be undone.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  ⚠️ This action can't be undone.
</div>
</div>

Error Alert

Cyberpunk · Alerts

⛔ Something went wrong.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  ⛔ Something went wrong.
</div>
</div>

Cyberpunk forms

Text Input

Cyberpunk · Forms

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none" />
</div>

Textarea

Cyberpunk · Forms

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none"></textarea>
</div>

Select Dropdown

Cyberpunk · Forms

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <select class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>
</div>

Checkbox

Cyberpunk · Forms

I agree to the terms

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-cyan-400" />
  <span class="text-sm text-cyan-300">I agree to the terms</span>
</label>
</div>

Toggle Switch

Cyberpunk · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-lg bg-slate-800 border border-cyan-900 peer-checked:bg-slate-900 peer-checked:border peer-checked:border-cyan-400 peer-checked:shadow-[0_0_10px_rgba(34,211,238,0.6)] transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>
</div>

Cyberpunk feedback

Spinner

Cyberpunk · Feedback

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="w-8 h-8 rounded-full border-4 border-cyan-900 border-t-cyan-400 animate-spin"></div>
</div>

Progress Bar

Cyberpunk · Feedback

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="w-48 h-2.5 rounded-lg bg-slate-800 border border-cyan-900 overflow-hidden">
  <div class="h-full w-2/3 rounded-lg bg-cyan-400"></div>
</div>
</div>

Skeleton Loader

Cyberpunk · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-slate-800 border border-cyan-900"></div>
  <div class="h-4 w-1/2 rounded bg-slate-800 border border-cyan-900"></div>
</div>
</div>

Toast Notification

Cyberpunk · Feedback

Vanilla JavaScript — no framework required.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button id="toast-trigger" class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-sm font-semibold px-4 py-3 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
  ✅ Saved successfully!
</div>
</div>

Cyberpunk overlays

Accordion / FAQ Item

Cyberpunk · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <details class="w-48 rounded-lg border border-cyan-400 bg-slate-900 p-4 group">
  <summary class="cursor-pointer text-sm font-bold text-cyan-300 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-cyan-300/70 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-cyan-300/70 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>
</div>

Modal Dialog

Cyberpunk · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <button id="modal-open" class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-lg p-6 w-full max-w-xs bg-slate-900 border border-cyan-400 text-cyan-300 backdrop:bg-black/50">
  <h3 class="text-sm font-bold mb-2">Confirm action</h3>
  <p class="text-xs text-cyan-300/70 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-cyan-300/70">Cancel</button>
    <button class="px-3 py-1.5 rounded-lg text-xs font-bold bg-slate-900 text-cyan-400">Confirm</button>
  </div>
</dialog>
</div>

Tooltip

Cyberpunk · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-xs font-bold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>
</div>

Cyberpunk avatars

Circle Avatar

Cyberpunk · Avatars

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="w-10 h-10 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">AB</div>
</div>

Avatar Group

Cyberpunk · Avatars

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">A</div>
  <div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">B</div>
  <div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">C</div>
  <div class="w-9 h-9 rounded-lg bg-slate-900 border border-cyan-400 border-2 border-white flex items-center justify-center text-cyan-300/70 text-xs font-bold">+5</div>
</div>
</div>

Avatar with Status

Cyberpunk · Avatars

<div class="bg-slate-950 p-6 rounded-xl inline-block">
  <div class="relative inline-block">
  <div class="w-10 h-10 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>

What is the cyberpunk style?

Cyberpunk UI pairs near-black surfaces (slate-900 and slate-950) with saturated neon accents. Here the signature is a cyan glow made from colored box-shadows such as shadow-[0_0_15px_rgba(34,211,238,0.6)], which intensifies on hover, combined with thin cyan borders and bright cyan text.

When to use it

It fits game launchers, esports and streaming overlays, crypto dashboards, developer tools with a terminal vibe, and event or music sites. Because it is dark by design, it also works as an alternative theme for products that already offer a dark mode.

Accessibility notes

Neon on black usually has strong contrast, but glow effects can blur the edges of small text and cause eye strain over long sessions. Keep body text calmer than the neon accent, reserve glows for interactive elements, and avoid flashing effects — WCAG limits flashing content to three flashes per second.

← Back to the full UI Component Library

Frequently Asked Questions

How do I make a neon glow effect in Tailwind?↓

Use a colored box-shadow with no offset and a blur radius, such as shadow-[0_0_15px_rgba(34,211,238,0.6)], on a dark background. Increase the blur and opacity on hover for a stronger glow.

Does the cyberpunk kit work on light backgrounds?↓

Not well. The glow relies on a dark surface for contrast, so place these components on slate-900 or darker.

Is neon text accessible?↓

Bright cyan on near-black passes contrast checks, but a heavy glow can blur small text. Use glows on borders and buttons rather than body copy.

Last updated: November 7, 2026