Y2K Tech UI 🎛️

A React component library inspired by the translucent, futuristic design of early 2000s portable stereo systems. Features glass morphism effects, chrome surfaces, electric blue accents, and nostalgic Y2K aesthetics.

!Y2K Tech UI Preview

✨ Features

- 🎨 Y2K Aesthetic: Translucent materials, chrome effects, electric blues
- 🔮 Glass Morphism: Modern glassmorphism effects with backdrop blur
- 🎛️ Interactive Components: Stereo player, brand kit showcase, and more
- 🎯 TypeScript: Full TypeScript support with proper type definitions
- 🎨 Tailwind CSS: Built with Tailwind CSS v4 for easy customization
- 📱 Responsive: Mobile-first responsive design
- ♿ Accessible: Built on Radix UI primitives for accessibility
- 🎪 Storybook: Comprehensive component documentation

🚀 Installation

``bash
npm install @y2k-tech/ui


or

yarn add @y2k-tech/ui

or

pnpm add @y2k-tech/ui
`

$3

This library requires:

- React 16.8+
- Tailwind CSS v4+
- The following fonts (automatically loaded):
- Inter (body text)
- Orbitron (display/headings)
- JetBrains Mono (code/digital displays)

🎨 Setup

$3

Add the Y2K UI styles to your app:

`tsx
// In your main CSS file or _app.tsx
import "@y2k-tech/ui/styles";
`

$3

Add the Y2K design tokens to your tailwind.config.js:

`js
/* @tailwind-config /
module.exports = {
content: [
'./pages/*/.{js,ts,jsx,tsx,mdx}',
'./components/*/.{js,ts,jsx,tsx,mdx}',
'./app/*/.{js,ts,jsx,tsx,mdx}',
'./node_modules/@y2k-tech/ui/*/.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
'y2k-electric-blue': '#0066ff',
'y2k-cyan': '#00ccff',
'y2k-chrome': '#c0c8d8',
'y2k-silver': '#8892a6',
'y2k-dark-chrome': '#4a5568',
'y2k-glow': 'rgba(0, 204, 255, 0.3)',
},
fontFamily: {
'display': ['Orbitron', 'Inter', 'system-ui', 'sans-serif'],
'mono': ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace'],
},
},
},
}
`

🎛️ Component Usage

$3

Import only the components you need:

`tsx
import { BrandKit } from "@y2k-tech/ui";
import { StereoPlayer } from "@y2k-tech/ui";
import { Button, Card, Badge } from "@y2k-tech/ui";

function MyApp() {
return (



);
}
`

$3

A configurable banner component composed from Y2K primitives. See also: docs/components/announcement-banner.md.

`tsx
import { AnnouncementBanner } from "@y2k-tech/ui";

variant="electric"
badge="ALERT"
title="Announcement"
message="Details go here"
animated
dismissible
/>
`

$3

`tsx
import {
BrandKit,
StereoPlayer,
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Badge,
y2kTheme,
y2kClasses,
} from "@y2k-tech/ui";
`

$3

A comprehensive showcase of the Y2K design system:

`tsx
import { BrandKit } from "@y2k-tech/ui";

function App() {
return (



);
}
`

$3

An interactive stereo player with Y2K aesthetics:

`tsx
import { StereoPlayer } from "@y2k-tech/ui";

function MusicApp() {
return (



);
}
`

$3

All components come with built-in Y2K styling:

`tsx
import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Badge,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
useIsMobile,
} from "@y2k-tech/ui";

function Dashboard() {
return (



Y2K Dashboard



Primary Action
Status


);
}
`

🎨 Styling System

$3

The library includes custom utility classes for Y2K effects:

`css
.glass-card / Glass morphism card effect /
.chrome-surface / Metallic chrome gradient /
.glow-blue / Electric blue glow effect /
.button-3d / 3D button with depth /
.font-display / Orbitron display font /
.text-tech / Uppercase tech text styling /
.text-digital / Monospace digital display text /
`

$3

`tsx
import { y2kClasses } from "@y2k-tech/ui";

function TechInterface() {
return (



className={${y2kClasses.button3d} ${y2kClasses.glowBlue} px-6 py-2 rounded-lg}
>
ACTIVATE