Skip the design-system sprint
111+ accessible React primitives — buttons, inputs, DataTable, Stepper, Calendar, Sidebar, Timeline, Charts — wired to the same surface/tone/density contract. Drop them in and theme once.
PIXEL-ART UI KIT v2.0.1MIT Code · Licensed AssetsTypeScript + Tailwind🔥 50% Off Launch
PXLKIT
Ship Pixel-Perfect Retro Interfaces in Minutes, Not Days.
Retro pixel-art React UI kit · 226+ icons · 111+ components · MIT code, source-available art.
$npm i @pxlkit/core @pxlkit/ui-kit @pxlkit/ui— ready in seconds
Components
0+
Icons
0+
Themed packs
0
Built on three pillars: Pick the aesthetic. Keep the engineering.
A switchable surface, accessibility on every interactive, and batteries you'd otherwise spend two sprints assembling. Same kit, three reasons it's worth keeping.
Surface system
Flip the whole kit between an 8-bit pixel aesthetic and a flat linear one with a single surface prop. Same components, same API, different look — no fork, no rewrite when the brand pivots.
Accessibility-first
WAI-ARIA roles, keyboard nav, focus rings, and reduced-motion fallbacks ship with every interactive — not retrofitted later. WCAG 2.1 contrast tokens by default.
Batteries-included
DataTable, Stepper, Sidebar, Timeline, Calendar, Charts, OTPInput, Toasts — the boring bits are already done. Drop them in, theme once, focus on what makes your product different.
What you actually get back: The hours you'd spend rolling your own.
Six reasons teams swap their half-built design system for Pxlkit — measured in days of work you don't repeat.
Land your first screens this week
Sections (hero, pricing, FAQ, header, footer) and 6 full-page layouts you copy-paste into the route. Dark + light included, responsive out of the box.
Bundle stays tiny — only what you import
226+ hand-crafted 16×16 SVG icons across 7 packs, fully tree-shakeable. Pure SVG, zero runtime deps, no font loading. Your bundle only carries what you actually render.
Notify users without picking a toast library
Animated pixel icons, progress bars, 6 screen positions, smooth stacking, and a useToast() hook — already inside the kit. One less dependency to pin.
Make a brand icon without opening Figma
A paint-style pixel editor with retro palettes, undo/redo, and live code export. Sketch a one-off icon in the browser, paste the result straight into your repo.
Let an LLM draft icons for you
The grid format reads like ASCII art with a legend — perfect for ChatGPT, Claude, or Gemini. Copy the prompt, paste the output, preview instantly.
Templates: Six full layouts. Open, copy, swap, ship.
Dashboards, changelog, docs, full SaaS landing, portfolio, e-commerce — every page wired end-to-end with the kit, dark + light included. Preview live, copy the route, change the words.
95+Components
745Tests
5Waves shipped
WCAG 2.1A11y baseline
FROM NPM INSTALL TO RENDERED ICON IN 3 STEPS
Icons are simple character grids where each letter maps to a color — readable by humans and by LLMs. 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',
'Y': '#FFF44F',
'D': '#B8860B',
'B': '#8B4513',
'W': '#FFFFFF',
},
tags: ['trophy', 'achievement'],
};App.tsx — Usage
import { PxlKitIcon } from '@pxlkit/core';
import { Trophy } from '@pxlkit/gamification';
<PxlKitIcon icon={Trophy} size={32} colorful />
<PxlKitIcon icon={Trophy} size={32} />
<PxlKitIcon icon={Trophy} size={48} color="#FF0000" />Live Preview:
Trophy
Heart
SunBellmonoNEWInteractive 3D10 Icons
ICONS THAT POP OFF THE SCREEN
Multi-layer 3D icons with mouse rotation and click interactions — particles, layer explosions, color shifts.
3D Parallax Pack
10 interactive icons
226+ HAND-CRAFTED PIXEL ART SVG ICONS
Every icon is a 16×16 pixel masterpiece across 7 themed packs — 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
DROP A TOAST IN ONE LINE
One useToast() hook for success, error, warning, info — animated icons, stacking, and 6 positions handled. No extra dependency to pin or wire to Sentry.
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
DESCRIBE THE ICON — GET THE CODE
The grid format reads like ASCII art with a legend, so any LLM can author one. Copy the prompt, paste the output, preview before you commit.
Static Prompt Template
Generate a pixel art icon in this exact JSON format.
{
"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"]
}Paste AI Output
🔥 50% OFF — Launch Price
ONE-TIME LICENSE. NO SUBSCRIPTION.
Code is MIT, icon packs are free with attribution. Shipping a client product and need to drop the credit? Grab a lifetime asset license at 50% off.
Community
Free
perfect for: side projects, OSS, prototypes
- 226+ pixel art icons
- 7 thematic packs
- 111+ React components
- All section templates
- Asset attribution required
Most Popular
Indie
$9.50$19
perfect for: solo dev shipping one paid product
- No attribution needed
- 1 commercial project
- Lifetime updates included
- All current icon packs
Team
$24.50$49
perfect for: agencies and teams shipping many products
- Unlimited commercial projects
- All future packs free
- Priority support
- Sponsor logo on GitHub
BEFORE YOU INSTALL — THE COMMON QUESTIONS
License terms, framework fit, bundle impact, and how the icon licensing actually works.
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…
React Three FiberProcedural Worlds9+ BiomesMIT License
Your next project deserves it: Spend the week on the product, not the design system.
One install, one provider, and the boring 80% is done — accessibility, surface, theming, icons, templates. MIT code, lifetime asset licenses if you need them, and zero subscription.
$npm i @pxlkit/core @pxlkit/ui-kit