Candy UI Kit — HTML, CSS & SVG Game Interface System

Live Demo

Explore the components, icons, and complete game UI showcases before purchasing.

▶ [Open Candy UI Kit Live Demo]

Build polished casual-game interfaces faster with a reusable HTML, CSS, and SVG UI system. Candy UI Kit includes 14 components, 15 complete showcase screens, 77 SVG icons, three candy-themed backgrounds, copy-ready examples, and detailed customization documentation—without a build step or framework dependency.

Build a polished game interface without starting from zero

Candy UI Kit is a reusable HTML, CSS, and SVG interface system for casual games, browser games, HTML5 projects, prototypes, and game-related web experiences.

Instead of delivering only flattened images, the kit provides editable source code, reusable CSS components, scalable SVG icons, ready-made screen examples, and practical documentation. Change the colors, typography, spacing, icons, and decorative elements to create a new visual theme while keeping the component structure.

Included in version 1.0.0

• 14 reusable UI components
• 15 complete game-screen showcases
• 77 scalable SVG UI and game icons
• 3 reusable candy-themed backgrounds
• 107 component HTML variants
• Responsive HTML and CSS examples
• Shared design tokens and utility styles
• Fredoka font files under the SIL Open Font License 1.1
• Component, foundation, theming, and reskin documentation
• Commercial single-user license

Components

Background, Badge, Button, Card, Currency, HUD, Level, Panel, Popup, Progress, Ribbon, Tabs, Title, and Toggle.

Complete showcase screens

Achievements, Confirmation Modal, Daily Reward, Game Over, Gameplay, Leaderboard, Levels, Loading, Main Menu, Pause, Profile, Rewards, Settings, Shop, and Victory.

Built for customization

Candy UI Kit uses standard HTML, CSS, and SVG. There is no package manager, framework, or compilation step. Copy only the components you need, edit the shared design variables, replace the icons and decorative assets, and adapt the markup to your game.

Best suited for

• HTML5 and browser games
• Casual, match-3, puzzle, idle, arcade, and kids' games
• Game menus, HUDs, shops, rewards, settings, and level-selection interfaces
• Web-based prototypes and playable game mockups
• Developers who prefer editable code over flattened image-only assets

Important format information

This is a code-based HTML/CSS/SVG UI kit. It is not a PNG sprite pack, Photoshop file, Illustrator file, Figma library, complete game, or ready-made Phaser plugin. Phaser projects can use it as a DOM-based interface layer or adapt its SVG and visual styling, but the components are not native Phaser Game Objects.

Technical requirements

• A modern browser
• Basic HTML and CSS knowledge for customization
• An internet connection only when using the included Markdown documentation viewer; the UI components and demos use local files