1 GitHub star = 1 new component.

Star the repo
Navigationretronavigationgame

Retro Arcade Menu

Arcade-styled menu with pixel font and highlighted cursor.

▶ LOAD GAME
OPTIONS
EXIT

Usage

Copy and paste this code into your React component:

tsx
import { RetroArcadeMenu } from 'react-component-kit-ui/navigation';

<RetroArcadeMenu>Content</RetroArcadeMenu>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/RetroArcadeMenu.tsx + RetroArcadeMenu.css:

RetroArcadeMenu.tsx
'use client';

import './RetroArcadeMenu.css';

/** RetroArcadeMenu — ported from astro-component-kit. */
export interface RetroArcadeMenuProps {
}

export function RetroArcadeMenu({}: RetroArcadeMenuProps) {
  return (
    <>
      <div className="retro-menu" data-rk-00ab44="">
        <div className="item selected" data-rk-00ab44="">▶ LOAD GAME</div>
        <div className="item" data-rk-00ab44="">OPTIONS</div>
        <div className="item" data-rk-00ab44="">EXIT</div>
      </div>
    </>
  );
}

export default RetroArcadeMenu;
RetroArcadeMenu.css
/* RetroArcadeMenu — ported from astro-component-kit (navigation/RetroArcadeMenu.astro) */

.retro-menu:where([data-rk-00ab44]) { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; }
.item:where([data-rk-00ab44]) { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; }
.item.selected:where([data-rk-00ab44]) { color: #facc15; }

Quick Info

Category
Navigation
Filename
RetroArcadeMenu.tsx
Dependencies
None — pure React + CSS
Tags
retronavigationgame