Retro UI Kit

28 chunky, nostalgic components — thick borders, warm orange and lime tones, rounded corners and buttons that press down when clicked.

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

Retro buttons

Primary Button

Retro · Buttons

<button class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none  transition-all">
  Primary Button
</button>

Outline Button

Retro · Buttons

<button class="bg-transparent text-orange-700 border-4 border-orange-400 rounded-2xl px-4 py-2 text-sm font-extrabold transition-colors">
  Outline Button
</button>

Icon Button

Retro · Buttons

<button class="w-10 h-10 flex items-center justify-center rounded-full bg-orange-100 border-4 border-orange-400 text-orange-700  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>

Accent Button

Retro · Buttons

<button class="bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 rounded-full px-5 py-2.5 text-sm font-black  transition-all">
  Get Started
</button>

Retro badges

Status Pill

Retro · Badges

Active

<span class="inline-flex items-center gap-1.5 bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 rounded-full px-2.5 py-1 text-xs font-black">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

Notification Badge

Retro · Badges

🔔 3

<span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-orange-100 border-4 border-orange-400 text-orange-600">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 text-[10px] font-black">3</span>
</span>

Retro cards

Basic Card

Retro · Cards

Card Title

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

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-5 ">
  <h3 class="text-sm font-black text-orange-700 mb-1">Card Title</h3>
  <p class="text-xs text-orange-600">A short description of this card's content goes here.</p>
</div>

Profile Card

Retro · Cards

Jane Doe

Product Designer

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-5  flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">JD</div>
  <div>
    <p class="text-sm font-black text-orange-700">Jane Doe</p>
    <p class="text-xs text-orange-600">Product Designer</p>
  </div>
</div>

Pricing Card

Retro · Cards

Pro

$19/mo

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-6 ">
  <p class="text-xs font-black text-orange-700 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-black text-orange-700 mb-4">$19<span class="text-sm text-orange-600">/mo</span></p>
  <button class="w-full bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
    Choose Plan
  </button>
</div>

Retro alerts

Info Alert

Retro · Alerts

ℹ️ This is an informational message.

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
  ℹ️ This is an informational message.
</div>

Success Alert

Retro · Alerts

✅ Your changes have been saved.

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
  ✅ Your changes have been saved.
</div>

Warning Alert

Retro · Alerts

⚠️ This action can't be undone.

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
  ⚠️ This action can't be undone.
</div>

Error Alert

Retro · Alerts

⛔ Something went wrong.

<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
  ⛔ Something went wrong.
</div>

Retro forms

Text Input

Retro · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none" />

Textarea

Retro · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none"></textarea>

Select Dropdown

Retro · Forms

<select class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Retro · Forms

I agree to the terms

<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-orange-600" />
  <span class="text-sm text-orange-700">I agree to the terms</span>
</label>

Toggle Switch

Retro · Forms

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

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-full bg-orange-100 border-2 border-orange-400 peer-checked:bg-lime-400 peer-checked:border-2 peer-checked:border-lime-600 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>

Retro feedback

Spinner

Retro · Feedback

<div class="w-8 h-8 rounded-full border-4 border-orange-200 border-t-orange-500 animate-spin"></div>

Progress Bar

Retro · Feedback

<div class="w-48 h-2.5 rounded-full bg-orange-100 border-2 border-orange-400 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-gradient-to-r from-lime-300 to-lime-500"></div>
</div>

Skeleton Loader

Retro · Feedback

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

<div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-orange-100 border-2 border-orange-400"></div>
  <div class="h-4 w-1/2 rounded bg-orange-100 border-2 border-orange-400"></div>
</div>

Toast Notification

Retro · Feedback

Vanilla JavaScript — no framework required.

<button id="toast-trigger" class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-2xl bg-orange-100 border-4 border-orange-400 text-orange-700 text-sm font-extrabold px-4 py-3 ">
  ✅ Saved successfully!
</div>

Retro overlays

Accordion / FAQ Item

Retro · Overlays

Refund policy? ▾

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

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

<details class="w-48 rounded-2xl border-4 border-orange-400 bg-orange-100 p-4 group">
  <summary class="cursor-pointer text-sm font-black text-orange-700 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-orange-600 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-orange-600 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

Modal Dialog

Retro · Overlays

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

<button id="modal-open" class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-2xl p-6 w-full max-w-xs bg-orange-100 border-4 border-orange-400 text-orange-700 backdrop:bg-black/50">
  <h3 class="text-sm font-black mb-2">Confirm action</h3>
  <p class="text-xs text-orange-600 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-2xl text-xs font-extrabold text-orange-600">Cancel</button>
    <button class="px-3 py-1.5 rounded-2xl text-xs font-black bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900">Confirm</button>
  </div>
</dialog>

Tooltip

Retro · Overlays

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

<span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-full bg-orange-100 border-4 border-orange-400 text-orange-700 text-xs font-black">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-2xl bg-orange-400 border-2 border-orange-600 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Retro avatars

Circle Avatar

Retro · Avatars

<div class="w-10 h-10 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">AB</div>

Avatar Group

Retro · Avatars

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">A</div>
  <div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">B</div>
  <div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">C</div>
  <div class="w-9 h-9 rounded-full bg-orange-100 border-4 border-orange-400 border-2 border-white flex items-center justify-center text-orange-600 text-xs font-black">+5</div>
</div>

Avatar with Status

Retro · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>

What is the retro style?

This retro kit channels late-90s software and arcade cabinets: extra-heavy font weights, thick colored borders (border-4 border-orange-400), warm cream backgrounds and glossy lime gradient buttons that nudge down when pressed (active:translate-y-1). It feels tactile and fun without becoming a pixel-art parody.

When to use it

Use it for games, hobby and community sites, kids' and education products, event pages and side projects with a sense of humor. It is a strong choice when you want warmth and personality more than corporate polish. Mix in one or two retro pieces — a chunky button or a bordered card — to add character to an otherwise modern layout.

Accessibility notes

Warm pastel backgrounds with mid-tone text can fall below 4.5:1 contrast, so keep text dark (slate-900) on light orange or lime surfaces. Pair the pressed-button effect with a visible focus state, and avoid the extra-bold weight for long paragraphs, where it reduces readability.

← Back to the full UI Component Library

Frequently Asked Questions

How do I make a pressable button in CSS?↓

Move the button down slightly while it is active — active:translate-y-1 in Tailwind — and, if it has a solid bottom shadow, remove the shadow at the same time with active:shadow-none so it looks pushed in.

What fonts work with a retro UI?↓

Rounded or heavy sans-serif fonts such as Fredoka, Nunito or Rubik pair well. For a stronger 8-bit feel, use a pixel font only for headings and keep body text in a readable sans-serif.

Are the retro components free to use?↓

Yes. All 28 components are free to copy into personal or commercial projects without attribution.

Last updated: November 7, 2026