Raw Fun UI ·

A game-themed UI component library with switchable themes, built with TypeScript and pure CSS.

Live Demo · Documentation

🚀 Motivation

A configurable UI package that works across all our games with minimal config for fast prototyping. Unlike heavy framework-dependent UI libraries, Raw Fun UI is:

• Zero Framework Dependencies - Works with vanilla JavaScript/TypeScript
• Pure CSS Effects - Multi-layer box shadows for authentic 3D depth
• Game-Ready - Optimized for interactive applications and games
• Self-Contained - Single CSS file + TypeScript class, minimal build process

✨ Features

• 🎮 3D Rfui Aesthetic: Multi-layer box shadows creating realistic 3D depth
• 🎨 Pure CSS Styling: No SVG generation, hardware-accelerated rendering
• 🎭 Theme Support: 3 built-in themes (blocky, fall-guys, animal-crossing)
• 📦 Zero Dependencies: Pure TypeScript/JavaScript with no external dependencies
• 💪 Full TypeScript Support: Complete type safety with comprehensive interfaces
• 📱 Responsive Design: Mobile-first approach with adaptive breakpoints
• ⚡ Lightweight & Fast: Minimal bundle size, optimized for 60fps animations
• 🔧 Framework-Agnostic: Works with React, Vue, Svelte, or vanilla JS

Installation

npm install raw-fun-ui

Usage

import { RawFunUI } from 'raw-fun-ui';
import 'raw-fun-ui/styles';

// Set a theme (optional - defaults to 'vanilla')
RawFunUI.setTheme('fall-guys'); // or 'blocky', 'animal-crossing', 'vanilla'

// Create a button
const button = RawFunUI.createButton({
  text: 'Click Me',
  variant: 'primary',
  onClick: () => console.log('Clicked!')
});

document.body.appendChild(button);

// Create and show a modal
const modal = RawFunUI.createModal({
  title: 'Welcome',
  content: 'This is a rfui modal!',
  buttons: [
    { text: 'OK', variant: 'primary', onClick: () => {} }
  ]
});

modal.show();  // Show the modal
// modal.close();  // Close programmatically

// Convenience methods for common modal types
RawFunUI.createNotification('Success!', 'Operation completed.').show();
RawFunUI.createError('Error!', 'Something went wrong.').show();

const confirmModal = RawFunUI.createConfirmation(
  'Confirm Action',
  'Are you sure?',
  () => console.log('Confirmed'),
  () => console.log('Cancelled')
);
confirmModal.show();

📦 Components

Interactive Components

• RfuiButton - 4 variants with 3D hover effects
• RfuiDropdown - Theme-aware dropdowns with 4 variants and custom arrow
• RfuiSlider - Range input with snap positions and optional labels
• RfuiModal - Full-featured modals with backdrop blur and animations

Display Components

• RfuiCard - Content containers with 3D styling
• RfuiInfo - Overlay popups with 5 color themes (yellow, green, blue, purple, red)
• RfuiTag - Status/location tags with gradient styling
• RfuiPage - Full-screen pages with animated gradient borders (7 color sets) and optional auto-hide scrollbar

Utility Components

• Error Dialogs - Pre-configured error modals
• Confirmation Dialogs - Yes/No confirmation modals
• Notifications - Toast-style notifications

🎭 Themes

Switch themes at runtime:

RawFunUI.setTheme('blocky');           // dark 3D aesthetic
RawFunUI.setTheme('fall-guys');        // bright cartoon style
RawFunUI.setTheme('animal-crossing');  // flat cozy NookPhone style
RawFunUI.setTheme('vanilla');          // structural base, no visual opinion

| Theme | Description | |-------|-------------| | vanilla | Structural base with no visual opinion — layout, sizing, transitions only | | blocky | Dark 3D with multi-layer shadows and gradient overlays | | fall-guys | Bright cartoon style — solid black offset shadows, thick white borders, 16px radius | | animal-crossing | Flat cozy NookPhone style — soft diffused shadows, earthy tones, 30px containers, pill buttons |

Granular CSS imports

Import only the theme you need to reduce bundle size:

// All-in-one (backwards compatible, all themes included)
import 'raw-fun-ui/styles';

// Minimal — only ship the theme you use
import 'raw-fun-ui/styles/vanilla';
import 'raw-fun-ui/styles/blocky';
RawFunUI.setTheme('blocky');

See Theme Design Specs for full details.

Styling

Raw Fun UI uses pure CSS with 3D box-shadow effects, gradient backgrounds, and smooth transitions. All components feature:

• 3D depth with multi-layer box shadows
• Smooth hover and active state animations
• Gradient backgrounds with radial overlays
• Responsive breakpoints for all screen sizes
• Customizable color variants
• Theme-based styling via data-rfui-theme attribute

Customising the close button

The close button (.rfui-close-btn) renders as two rotated CSS bars. Two design tokens control its proportions:

| Token | Default | Effect | |---|---|---| | --rfui-close-btn-bar-width | 60% | Length of each bar (relative to button width) | | --rfui-close-btn-bar-height | 2px | Stroke thickness |

Tweak via tokens (scoped to a theme or any selector):

[data-rfui-theme='my-theme'] {
  --rfui-close-btn-bar-width: 50%;
  --rfui-close-btn-bar-height: 3px;
}

Full replacement with an SVG — suppress the bars and provide a background image:

/* suppress default bars */
.rfui-close-btn::before,
.rfui-close-btn::after { content: none; }

/* your own icon — inherits opacity/hover from the shared class */
.rfui-close-btn {
  background: url("data:image/svg+xml,...") center / 60% 60% no-repeat;
}

Scoped to a theme:

[data-rfui-theme='my-theme'] .rfui-close-btn::before,
[data-rfui-theme='my-theme'] .rfui-close-btn::after { content: none; }

[data-rfui-theme='my-theme'] .rfui-close-btn {
  background: url("data:image/svg+xml,...") center / 60% 60% no-repeat;
}

🎨 Visual Design

The components feature:

• Multi-layer box shadows creating authentic 3D depth
• Gradient backgrounds with radial overlays for richness
• Smooth hover animations with Y-axis transforms
• Backdrop blur for modern glassmorphism effects
• Responsive scaling for different screen sizes
• Customizable color variants via CSS custom properties

📖 Documentation

Quick Links

• 🏠 Documentation Home - Complete documentation
• 🚀 Installation & Setup - Get started quickly
• 📚 Component Reference - Full API documentation
• 💡 Complete Examples - Real-world examples
• 🎨 Themes - Theme design specs

🎮 Perfect for Games

• No Framework Lock-in: Works with any game engine
• Performance Optimized: Pure CSS for 60fps animations
• Memory Efficient: Minimal memory footprint
• Event-Driven: Clean event handling
• Responsive: Adapts to different screen sizes

📁 File Structure

raw-fun-ui/
├── README.md               # This file
├── package.json           # Package configuration
├── rollup.config.js       # Build configuration
├── src/                   # Source code
│   ├── index.ts           # Main entry point
│   ├── components/        # Individual component classes
│   │   ├── RfuiButton.ts
│   │   ├── RfuiModal.ts
│   │   ├── RfuiCard.ts
│   │   ├── RfuiInfo.ts
│   │   ├── RfuiTag.ts
│   │   └── RfuiPage.ts
│   ├── types/             # TypeScript definitions
│   │   └── index.ts
│   └── styles/            # CSS modules
│       ├── base/
│       │   ├── _variables.css
│       │   ├── _shared.css
│       │   └── _animations.css
│       ├── components/
│       │   ├── _button.css
│       │   ├── _modal.css
│       │   ├── _card.css
│       │   ├── _info.css
│       │   ├── _tag.css
│       │   └── _page.css
│       ├── themes/
│       │   ├── _fall-guys.css
│       │   └── _animal-crossing.css
│       └── raw-fun-ui.css   # Main entry point
├── dist/                  # Built output (generated)
│   ├── index.esm.js       # ES Module build
│   ├── index.cjs.js       # CommonJS build
│   ├── index.umd.js       # UMD build
│   ├── index.d.ts         # TypeScript declarations
│   └── raw-fun-ui.css      # Processed styles
├── public/                # GitHub Pages source
│   ├── index.html         # Live demo page
│   └── docs/              # Jekyll documentation pages
└── screenshots/           # Component screenshots

🚀 Development

Development Commands

# Install dependencies
npm install

# Build library
npm run build

# Watch mode for development
npm run dev

# Run demo server
npm run demo

# Clean build artifacts
npm run clean

Contributing

Contributions welcome! Please maintain the 3D blocky aesthetic and follow the established patterns for new components.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🔄 Version History

See CHANGELOG.md for version history and release notes.

Built for gaming. Designed with 3D depth. 🎮

Star ⭐ this repo if you find it useful!