Raw Fun UI
Welcome to the Raw Fun UI documentation! A lightweight, zero-dependency TypeScript UI component library for themeable game UI interfaces.
Quick Start
npm install raw-fun-ui
import { RawFunUI } from 'raw-fun-ui';
import 'raw-fun-ui/styles';
const button = RawFunUI.createButton({
text: 'Launch Sequence',
variant: 'primary',
onClick: () => console.log('Launched!')
});
Key Features
- Zero Dependencies: Pure TypeScript/JavaScript + CSS
- Pure CSS Effects: Multi-layer box shadows for 3D depth
- Smooth Animations: 3D hover effects and transitions
- Responsive: Mobile-first responsive design
- Game-Ready: Optimized for interactive applications
- TypeScript: Full type safety and IntelliSense
Components
| Component | Description |
|---|---|
| RfuiButton | 4 variants with 3D hover effects |
| RfuiDropdown | Theme-aware dropdowns with 4 variants |
| RfuiModal | Full-featured modals with backdrop blur |
| RfuiCard | Content containers with 3D styling |
| RfuiInfo | Overlay popups with 5 color themes |
| RfuiTag | Status tags with gradient styling |
| RfuiPage | Full-screen pages with animated gradient borders |
Themes
Raw Fun UI ships with a vanilla structural base and 3 visual themes:
- Vanilla — structural base with no visual opinion
- Blocky — dark 3D blocky aesthetic
- Fall Guys — bright cartoon style with white borders
- Animal Crossing — flat cozy NookPhone style with earthy tones
RawFunUI.setTheme('blocky');
RawFunUI.setTheme('fall-guys');
RawFunUI.setTheme('animal-crossing');
Import only what you need:
import 'raw-fun-ui/styles/vanilla';
import 'raw-fun-ui/styles/blocky';
Design Philosophy
- Simplicity First: Easy to use, minimal API surface
- Performance Focused: Pure CSS for maximum performance
- Modular Architecture: Use only what you need
- Casino Game Aesthetic: Designed for casino and casual gaming UIs