A lightweight, 3D blocky-themed UI component library built with TypeScript and pure CSS
npm install blocky-ui-lite











A lightweight, 3D blocky-themed UI component library built with TypeScript and pure CSS.
> š® Live Demo - Try all components interactively!
> š Complete Documentation | Local Docs | Architecture Guide
Inspired by the multiplier tags in Stack Rush, I wanted to create a lightweight UI library that brings that distinctive 3D blocky aesthetic to any web project. Unlike heavy framework-dependent UI libraries, Blocky 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
- š® 3D Blocky Aesthetic: Multi-layer box shadows creating realistic 3D depth
- šØ Pure CSS Styling: No SVG generation, hardware-accelerated rendering
- š Theme Support: Built-in themes (blocky, fall-guys) with easy customization
- š¦ 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
``bash`
npm install blocky-ui-lite
`typescript
import { BlockyUI } from 'blocky-ui-lite';
import 'blocky-ui-lite/styles';
// Set a theme (optional - defaults to 'blocky')
BlockyUI.setTheme('fall-guys'); // or 'blocky' for default theme
// Create a button
const button = BlockyUI.createButton({
text: 'Click Me',
variant: 'primary',
onClick: () => console.log('Clicked!')
});
document.body.appendChild(button);
// Create and show a modal
const modal = BlockyUI.createModal({
title: 'Welcome',
content: 'This is a blocky modal!',
buttons: [
{ text: 'OK', variant: 'primary', onClick: () => {} }
]
});
modal.show(); // Show the modal
// modal.close(); // Close programmatically
// Convenience methods for common modal types
BlockyUI.createNotification('Success!', 'Operation completed.').show();
BlockyUI.createError('Error!', 'Something went wrong.').show();
const confirmModal = BlockyUI.createConfirmation(
'Confirm Action',
'Are you sure?',
() => console.log('Confirmed'),
() => console.log('Cancelled')
);
confirmModal.show();
`
Blocky UI supports multiple themes out of the box. Switch themes at runtime with a single line of code:
`typescript
import { BlockyUI } from 'blocky-ui-lite';
// Switch to Fall Guys theme (bright, playful cartoon style)
BlockyUI.setTheme('fall-guys');
// Switch back to default blocky theme
BlockyUI.setTheme('blocky');
`
| Theme | Description |
|-------|-------------|
| blocky | Default dark theme with deep shadows and purple accents |fall-guys
| | Bright, playful cartoon style with cyan backgrounds, solid black shadows, purple headers, and rounded corners |
Fall Guys Theme includes:
- Light cyan (#64d4ff) backgrounds
- Solid black drop shadows (no transparency)
- Purple gradient headers with white text
- White borders on components
- More rounded corners (16-20px)
- Playful, cartoon-like aesthetic
Blocky 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-blocky-theme attribute
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
directory.š® 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
š¼ļø Credits
Design Inspiration: Stack Rush multiplier tags - The distinctive 3D blocky aesthetic with multi-layer box shadows and gradient backgrounds.
š File Structure
`
blocky-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
ā ā āāā BlockyButton.ts
ā ā āāā BlockyModal.ts
ā ā āāā BlockyCard.ts
ā ā āāā BlockyInfo.ts
ā ā āāā BlockyTag.ts
ā ā āāā BlockyPage.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 # Fall Guys theme
ā āāā blocky-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
ā āāā blocky-ui.css # Processed styles
āāā docs/ # Documentation
ā āāā wiki/ # Wiki pages (local)
ā āāā index.html # GitHub Pages demo
āāā screenshots/ # Component screenshots
`š Development
$3
`bash
Install dependencies
npm installBuild library
npm run buildWatch mode for development
npm run devRun demo server
npm run demoClean build artifacts
npm run clean
`$3
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`)See CHANGELOG.md for version history and release notes.
MIT Ā© Richard Fu
---
Built for gaming. Designed with 3D depth. š®
Star ā this repo if you find it useful!