Ship Faster with Ready-Made Components
55+ pixel-art components — buttons, inputs, cards, modals, tables, selects, badges, tooltips, and more. Drop them in, customize the theme, and ship.
MIT Code · Licensed AssetsTypeScript + Tailwind🔥 50% Off Launch
READY-TO-USE REACT
TEMPLATES & UI KIT
Ship Pixel-Perfect Retro Interfaces in Minutes, Not Days.
Stop building from scratch. Copy-paste hero sections, pricing tables, CTAs, and full landing pages built with 55+ pixel-art components and 226+ hand-crafted SVG icons. Production-ready today.
55+ components226+ icons7 themed packs8 section types5 page templates$npm i @pxlkit/core @pxlkit/ui-kit @pxlkit/ui— ready in seconds
Sample icons from 7 themed packs
226+ icons · 7 packs · tree-shakeable SVG
55+
UI Components
226+
Pixel Icons
24
Section Variants
5
Page Templates
100%
TypeScript
Ready-to-use · Copy-paste · Zero native browser UI · Tree-shakeable
COPY & PASTERESPONSIVEPRODUCTION-READY
TEMPLATES & SECTIONS — SHIP IN MINUTES
24 section variants across 8 categories, plus 5 complete page layouts — 29 ready-to-use templates in total. Every template is built with Pxlkit components, fully responsive, and supports dark and light mode out of the box. Copy the code, drop it in your project, customize, and ship.
Hero Sections
3×Centered, split-layout, and parallax hero variants with responsive design
Headers
3×Simple nav, mega dropdown, and centered logo header variants
Pricing Tables
3×Cards, comparison table, and monthly/yearly toggle layouts
Testimonials
3×Card grid, large quote, and slider testimonial sections
CTAs
3×Banner, split, and card call-to-action blocks
Features
3×Icon grid, alternating, and bento feature layouts
FAQs
3×Accordion, two-column, and tabbed FAQ sections
Footers
3×Minimal, multi-column, and CTA footer variants
Full Page Templates
5 complete layoutsdrop-in · responsive · themedSaaS LandingComplete startup landing page with all sections
PortfolioDeveloper or designer portfolio with project grid
Indie GameGame marketing page with feature highlights
Admin DashboardPixel-art admin panel with stats and tables
BlogContent-focused blog layout with sidebar
EVERYTHING YOU NEED TO BUILD RETRO UIS
Components, templates, icons, toasts, a visual builder, and AI icon generation — a complete retro toolkit so you focus on your product, not pixel-art plumbing.
Templates You Can Copy-Paste Today
Hero sections, pricing tables, testimonials, CTAs, FAQs, headers, footers, and 5 full page templates. All responsive, themed, and production-ready.
Icons That Load in Microseconds
226+ hand-crafted 16×16 SVG icons across 7 thematic packs. Tree-shakeable — your bundle only includes what you actually use. Zero runtime dependencies.
Toast Notifications Built In
Retro-styled toast system with animated pixel icons, progress bars, 6 screen positions, and smooth stacking. No extra libraries needed.
Visual Icon Builder — Create in the Browser
Paint-style pixel editor with retro palettes, drawing tools, undo/redo, and live code export. Design custom icons without leaving the browser.
Let AI Generate Your Icons
Our grid format is tailor-made for LLMs. Copy a prompt, paste the result, preview instantly. Works with ChatGPT, Claude, Gemini, and more.
FROM NPM INSTALL TO PIXEL-PERFECT IN 3 STEPS
Icons are simple character grids — each character maps to a color. No complex APIs, no config files, no learning curve. Install, import, render.
trophy.ts — Icon Definition
import type { PxlKitData } from '@pxlkit/core';
export const Trophy: PxlKitData = {
name: 'trophy',
size: 16,
category: 'gamification',
grid: [
'................',
'..GGGGGGGGGGGG..',
'.GG.YYYYYYYY.GG.',
'.G..YYYYYYYY..G.',
'.G..YYYWYYYY..G.',
'.GG.YYYYYYYY.GG.',
'..GGGGGGGGGGGG..',
'....GGGGGGGG....',
'.....GGGGGG.....',
'......GGGG......',
'......GGGG......',
'.....DDDDDD.....',
'....DDDDDDDD....',
'....BBBBBBBB....',
'...BBBBBBBBBB...',
'................',
],
palette: {
'G': '#FFD700', // Gold
'Y': '#FFF44F', // Yellow highlight
'D': '#B8860B', // Dark gold
'B': '#8B4513', // Brown base
'W': '#FFFFFF', // White shine
},
tags: ['trophy', 'achievement'],
};App.tsx — Usage
import { PxlKitIcon } from '@pxlkit/core';
import { Trophy } from '@pxlkit/gamification';
// Colorful rendering
<PxlKitIcon icon={Trophy} size={32} colorful />
// Monochrome (inherits text color)
<PxlKitIcon icon={Trophy} size={32} />
// Custom monochrome color
<PxlKitIcon icon={Trophy} size={48} color="#FF0000" />Live Preview:
TrophyHeartSunBellmono226+ HAND-CRAFTED PIXEL ART SVG ICONS
Every icon is a 16×16 pixel masterpiece. Organized into 7 themed packs so you find what you need instantly — and tree-shake the rest away.
Gamification
51 icons@pxlkit/gamification
Feedback
33 icons@pxlkit/feedback
Social
43 icons@pxlkit/social
Weather
36 icons@pxlkit/weather
UI
41 icons@pxlkit/ui
Effects
12 icons@pxlkit/effects
NEWInteractive 3D10 Icons
ICONS THAT POP OFF THE SCREEN
Not flat. Not boring. Each icon has multiple layers floating at different Z-depths with real CSS 3D perspective. Move your mouse to rotate — click any icon for particle bursts, layer explosions, and color shifts. Your users will love this.
↕ Move mouse to rotate · Click to interact
3D Parallax Pack
10 interactive iconsanimated · 3-layer · click-reactive
True 3D Depth
CSS perspective + preserve-3d + per-layer translateZ
Page-Wide Tracking
Mouse rotation works across the entire viewport
Click Interactions
Particle bursts, layer explosions, color shifts on click
Animated Layers
Frame-based animation per layer — glints, pulses, sparkles
TOASTS THAT FEEL ALIVE
Retro-styled notifications your users will actually notice. Animated pixel icons, smooth progress bars, 6 screen positions, smart stacking. Click the buttons below — see them in action right now.
SAVED
Your changes have been saved
ERROR
Could not connect to server
NEW UPDATE
Pxlkit v2.0 is now available
LOW STORAGE
Only 12MB remaining — clean up soon
CREATE ICONS WITH AI IN SECONDS
Our grid format was designed for AI from day one. Copy the prompt, ask ChatGPT, Claude, or any LLM — paste the result and see your icon instantly. Then polish it in the visual builder.
Static Prompt Template
Generate a pixel art icon in this exact JSON format.
You can choose 8x8, 16x16, 24x24, 32x32, 48x48, or 64x64.
{
"name": "icon-name",
"size": 16,
"category": "your-category",
"grid": [
"................",
"................",
"......AABB......",
".....AACCBB.....",
"....AACCCCBB....",
"....ACCCCCCB....",
"....ACCDDCCB....",
"....ACCDDCCB....",
"....ACCCCCCB....",
"....AACCCCBB....",
".....AACCBB.....",
"......AABB......",
"................",
"................",
"................",
"................"
],
"palette": {
"A": "#1E40AF",
"B": "#3B82F6",
"C": "#60A5FA",
"D": "#FFFFFF"
},
"tags": ["example", "orb"]
}
Rules:
- Grid must have exactly N rows of N characters (matching "size")
- "." means transparent (empty pixel)
- Each non-"." character must appear in the palette
- Use 3-6 colors max for clean pixel art
- Think in terms of pixels on a grid
Create a [DESCRIBE YOUR ICON HERE] icon.Paste AI Output
🔥 50% OFF — Launch Price
PAY ONCE, USE FOREVER
MIT code is free, and icon packs are free with attribution. Need no-attribution asset use? Grab a lifetime license at 50% off — this price won't last. One payment, no subscriptions, no surprises.
Community
Free
forever — no credit card
- 226+ pixel art icons
- 7 thematic packs
- 55+ React components
- All section templates
- Asset attribution required
Most Popular
Indie
$9.50$19
one-time · 1 project · lifetime
- No attribution needed
- 1 commercial project
- Lifetime updates included
- All current icon packs
Team
$24.50$49
one-time · unlimited projects
- Unlimited commercial projects
- All future packs free
- Priority support
- Sponsor logo on GitHub
QUESTIONS? WE'VE GOT ANSWERS
Everything you need to know before getting started.
Yes. The code packages (UI kit, core, parallax) are MIT-licensed and completely free. The icon packs are free with a small attribution link. Paid licenses only remove the icon/asset attribution requirement.
COMING SOON
WHAT'S NEXT: @pxlkit/voxel
A 3D voxel engine for React is on the way. Procedural worlds, biome generation, interactive scenes — the retro aesthetic in full 3D.
Loading 3D…
🎮 Drag to orbit · @pxlkit/voxel preview
React Three FiberProcedural Worlds9+ BiomesMIT License
$npm i @pxlkit/voxel ← coming soon
YOUR NEXT PROJECT DESERVES A RETRO UI KIT
Join developers shipping retro-styled interfaces in minutes instead of days.55+ components, 226+ icons, ready-to-use templates — MIT code, and ready when you are.
$npm i @pxlkit/core @pxlkit/ui-kit