A comprehensive, modern UI kit designed specifically for building beautiful online games websites. Built with vanilla JavaScript, zero dependencies, and fully customizable.
- 🎮 Game-Specific Components - Game cards, category filters, game grids
- 🎨 Modern Design - Beautiful, responsive components with smooth animations
- 🌙 Dark Mode Support - Built-in theme system with CSS variables
- 📱 Fully Responsive - Mobile-first design that works on all devices
- ⚡ Zero Dependencies - Pure vanilla JavaScript, no framework required
- 🎯 Easy to Use - Simple API, works with CDN or npm
- ♿ Accessible - ARIA labels and keyboard navigation support
- 🎨 Customizable - Extensive CSS variables for theming
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/opengamesite/dist/opengamesite.css">
<script src="https://cdn.jsdelivr.net/npm/opengamesite/dist/opengamesite.umd.cjs"></script>npm install opengamesiteimport { button, gameCard, modal } from 'opengamesite';
import 'opengamesite/styles';import { button } from 'opengamesite';
button('#my-button', {
variant: 'primary',
icon: '/path/to/icon.png',
style: {
accent: '#ff4040'
}
});import { gameCard } from 'opengamesite';
gameCard('#game-container', {
title: 'Super Adventure',
thumbnail: '/games/super-adventure.jpg',
description: 'An epic adventure game',
category: 'Adventure',
rating: 4.5,
players: '1M+',
playUrl: '/play/super-adventure',
onPlay: () => {
console.log('Game started!');
}
});import { modal } from 'opengamesite';
const myModal = modal({
title: 'Game Info',
content: '<p>Welcome to the game!</p>',
size: 'medium',
onClose: () => {
console.log('Modal closed');
}
});- Button - Multiple variants (primary, secondary, outline, ghost)
- Card - Flexible card component with image, title, description, footer
- Modal - Dialog/modal with backdrop, animations, and keyboard support
- Navbar - Responsive navigation bar with mobile menu
- Search - Search input with debouncing and icon support
- Badge - Labels and tags with multiple variants
- Loading - Spinner, dots, and pulse loading indicators
- Tooltip - Positioned tooltips with multiple positions
- Dropdown - Dropdown menus with searchable option
- Tabs - Tab navigation component
- Progress - Progress bars with animations
- Rating - Star rating component (readonly or interactive)
- Avatar - User avatars with status indicators
- Pagination - Page navigation component
- Carousel - Image/content carousel with controls
- GameCard - Specialized card for games with play button overlay
- CategoryFilter - Filter buttons for game categories
- GameGrid - Responsive grid layout for game listings
- Input - Text inputs with labels, icons, validation
- Select - Dropdown selects with searchable option
- Checkbox - Checkbox inputs with labels
- Radio - Radio button groups
- Container - Responsive container with max-width
- Grid - CSS Grid layout helper
- Flex - Flexbox layout helper
- FPS Counter - Performance monitoring
- Draggable - Make elements draggable
- applyStyles - Apply CSS variable styles
The UI kit uses CSS variables for easy theming:
:root {
--gui-primary: #ff4040;
--gui-primary-dark: #c81f1f;
--gui-bg: #ffffff;
--gui-text: #212529;
--gui-radius: 10px;
/* ... and many more */
}Enable dark mode by adding the data-theme="dark" attribute or .dark-mode class:
<html data-theme="dark">import { gameGrid, categoryFilter, navbar, search } from 'opengamesite';
// Navbar
navbar('#navbar', {
brand: 'GameSite',
items: [
{ label: 'Home', href: '/' },
{ label: 'Games', href: '/games' },
{ label: 'About', href: '/about' }
]
});
// Search
search('#search', {
placeholder: 'Search games...',
onSearch: (query) => {
console.log('Searching for:', query);
}
});
// Category Filter
categoryFilter('#categories', {
categories: ['Action', 'Adventure', 'Puzzle', 'Racing'],
onSelect: (category) => {
console.log('Selected:', category);
}
});
// Game Grid
gameGrid('#games', {
games: [
{
title: 'Super Game',
thumbnail: '/game1.jpg',
category: 'Action',
rating: 4.5
},
// ... more games
],
columns: 4,
onGameClick: (game) => {
console.log('Clicked:', game);
}
});import { modal, input, button } from 'opengamesite';
const formModal = modal({
title: 'Login',
content: document.createElement('div'),
size: 'small'
});
const emailInput = input(formModal.element.querySelector('.gui-modal-body'), {
label: 'Email',
type: 'email',
placeholder: 'Enter your email'
});
const passwordInput = input(formModal.element.querySelector('.gui-modal-body'), {
label: 'Password',
type: 'password',
placeholder: 'Enter your password'
});- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
GPL-3.0-or-later
Contributions are welcome! Please feel free to submit a Pull Request.
Neuron Technologies