Step 3, rendered live — the exact code above
Revenue
$12,480
+8.2% this week
PIXEL-ART UI KIT v2.1.0MIT 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
Why teams keep it: Pick the aesthetic. Keep the engineering.
A pixel skin you can swap for flat in one prop, accessibility wired into every interactive, and the boring components already built.
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 AA 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, spend your sprints on the product.
No mockups on this page: This section is built from the kit itself.
Charts, a sortable table, controlled forms, a checkout stepper, real toasts — every cell below renders live from @pxlkit/ui-kit. Click around; it all works.
Analytics
PixelStatCard · PixelAreaChartMRR
$12,480
+8.2% this month
Active users
1,287
+212 this week
Revenue by plan
PixelBarChart · PixelSparklineCheckout conversion — last 14 days
Customers
PixelDataTable — click a header to sort| Moonlit Forge | Team | $49 | active |
| Bitwave Studio | Indie | $19 | active |
| Pixel & Co. | Team | $49 | trial |
| Retro Supply | Indie | $19 | past due |
| 8-Bit Bakery | Free | $0 | active |
Project settings
PixelInput · PixelSelect · PixelSwitch · PixelSliderTeam seats — 55
● Dungeon Tracker · us-east · 5 seats · autosave on
Checkout flow
PixelStepper — click a stepCart3 items
ShippingPixel post — 2 days
PayConfirm order
Notifications
PixelToast via useToast()One hook, four tones, six screen positions. Try it:
Adoption path: From npm install to shipped UI in 3 steps.
Install once, wrap your app once, and every component — table to toast — is ready. The strip below is the exact output of step 3.
01Install
npm install @pxlkit/core @pxlkit/ui-kit tailwindcss02Wire styles + provider
import { PxlKitSurfaceProvider } from '@pxlkit/ui-kit';import '@pxlkit/ui-kit/styles.css';export default function RootLayout({ children }) { return ( <html> <body> <PxlKitSurfaceProvider surface="pixel"> {children} </PxlKitSurfaceProvider> </body> </html> );}03Use components
import { PixelButton, PixelInput, PixelStatCard,} from '@pxlkit/ui-kit';<PixelStatCard label="Revenue" value="$12,480" trend="+8.2% this week" tone="green" /><PixelInput label="Email" tone="cyan" placeholder="you@studio.dev" /><PixelButton tone="green">Ship it</PixelButton>What you get back: The hours you'd spend rolling your own.
Six jobs Pxlkit already finished — measured in days you don't spend rebuilding them.
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.
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.
ICONS THAT POP OFF THE SCREEN
Multi-layer 3D icons that tilt with your mouse and react on click — particles, layer explosions, color shifts. Move your cursor over them.
NEWInteractive 3D10 Icons
3D Parallax Pack
10 interactive iconscool-emoji
pixel-heart
retro-tv
pixel-rocket
ghost-friend
neon-skull
magic-orb
pixel-crown
retro-joystick
cyber-eye
226+ HAND-CRAFTED PIXEL ART SVG ICONS
Seven themed packs of 16×16 pixel art, crisp at any size — tree-shaking drops every icon you don't import.
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
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
Components
111
Icons · 7 packs
226+
Page templates
6
Accessibility
WCAG 2.1 AA
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.
🔥 50% OFF — Launch Price
Community
perfect for: side projects, OSS, prototypes
Free
- Included: 226+ pixel art icons
- Included: 7 thematic packs
- Included: 111 React components
- Included: All section templates
- Included: Asset attribution required
Most Popular
Indie
perfect for: solo dev shipping one paid product
- Included: No attribution needed
- Included: 1 commercial project
- Included: Lifetime updates included
- Included: All current icon packs
Team
perfect for: agencies and teams shipping many products
- Included: Unlimited commercial projects
- Included: All future packs free
- Included: Priority support
- Included: 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, voxel) are MIT-licensed and free forever. The icon packs are free with a small attribution link. Paid licenses only remove the icon/asset attribution requirement.
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.
COMING SOON
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