y2k Social UI

A plug-and-play Y2K / MySpace-inspired React component kit for Next.js and Tailwind CSS v4. It uses CSS variables for its design tokens, so components can switch themes without depending on Tailwind utility generation.

Included

• RetroWindow — classic desktop-window frame
• RetroButton — primary, secondary, ghost, and danger buttons
• RetroCard — titled content card
• RetroBadge — small retro label
• ProfileCard — profile / online status block
• MusicPlayer — accessible play/pause control for a supplied audio URL
• Marquee — animated ticker with reduced-motion support
• Three themes: myspace, cyber, and chrome
• A Next.js App Router example page with a working theme switcher and client-side guestbook demo

Install in a Next.js app

npm install y2k-social-ui

Import its stylesheet once in your root layout:

// app/layout.tsx
import "y2k-social-ui/theme.css";
import "./globals.css";

For Tailwind CSS v4, your global stylesheet can use:

@import "tailwindcss";

No Tailwind plugin is required. Component styling is provided by the package stylesheet; Tailwind is available for your own layout utilities.

Theme switching

Place data-rs-theme on any wrapper. Components inside that wrapper inherit the theme tokens.

<main data-rs-theme="myspace" className="rs-theme">
  <RetroWindow title="my-profile.html">
    <p>hello, internet!</p>
    <RetroButton>Sign my guestbook</RetroButton>
  </RetroWindow>
</main>

Available theme names:

• myspace — blue social-web gradients and light panels
• cyber — dark surfaces, y2k pink, and lime accents
• chrome — cool greys and metallic-looking title bars

You can override any CSS custom property in your app:

[data-rs-theme="custom"] {
  --rs-bg: #fff0f8;
  --rs-surface: #fffaff;
  --rs-surface-raised: #ffe2f1;
  --rs-text: #35132e;
  --rs-muted: #805a77;
  --rs-border: #e59bc8;
  --rs-primary: #ff46a8;
  --rs-primary-contrast: #ffffff;
  --rs-pink: #ff8dc8;
  --rs-lime: #e0ff78;
  --rs-purple: #bb8cff;
  --rs-shadow: 4px 4px 0 rgb(125 34 91 / 16%);
}

Component examples

import {
  Marquee,
  MusicPlayer,
  ProfileCard,
  RetroBadge,
  RetroButton,
  RetroCard,
  RetroWindow,
} from "y2k-social-ui";

export function Profile() {
  return (
    <div data-rs-theme="cyber" className="rs-theme">
      <Marquee>HELLO INTERNET ✦</Marquee>
      <ProfileCard
        name="Yash"
        handle="pixel_overload"
        mood="listening to music"
      />
      <RetroWindow title="about-me.html">
        <RetroBadge tone="lime">online</RetroBadge>
        <RetroCard title="currently obsessed">
          <p>Guitars, code, and the early web.</p>
        </RetroCard>
        <RetroButton variant="secondary">Add friend</RetroButton>
        <MusicPlayer
          title="Demo track"
          artist="Your artist"
          src="/demo-track.mp3"
        />
      </RetroWindow>
    </div>
  );
}

MusicPlayer is a client component. Supply a valid audio URL you have permission to use. Browsers may block autoplay; playback starts when the user presses play.

Local development

npm install
npm run typecheck
npm run build

The example app is in example/; copy it into a Next.js App Router project or adapt it as a reference. The example imports the package by its eventual npm name. While developing locally, use a workspace, npm link, or change the import to your local package path.

Notes

• This package does not bundle React; React and React DOM are peer dependencies.
• The stylesheet imports Google Fonts. Remove the @import url(...) line if your app disallows remote font requests, and provide your own font stack.
• The example's guestbook is local component state only; it does not persist messages to a database.