PIXEL-ART UI KIT v2.2.0MIT Code · Licensed AssetsTypeScript + Tailwind🔥 50% Off Launch

PXLKIT — the retro pixel-art UI kit for React

Ship Pixel-Perfect Retro Interfaces in Minutes, Not Days.

Retro pixel-art UI kit for React — now also for Vue & Angular · 111 components · 226+ icons · MIT code, source-available art.

$npm i @pxlkit/ui-kit— ready in seconds

Vue: @pxlkit/ui-kit-vue · Angular: @pxlkit/ui-kit-angular

React components

111

Icons

226+

Themed packs

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. Colour tokens built for WCAG 2.1 AA contrast.

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 · PixelAreaChart

MRR

$12,480

+8.2% this month

Active users

1,287

+212 this week

Live playground →API reference

Revenue by plan

PixelBarChart · PixelSparkline

Checkout conversion — last 14 days

Live playground →API reference

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

Live playground →API reference

Project settings

PixelInput · PixelSelect · PixelSwitch · PixelSlider

Project name

Region

Team seats — 55

● Dungeon Tracker · us-east · 5 seats · autosave on

Live playground →API reference

Checkout flow

PixelStepper — click a step

Cart3 items

ShippingPixel post — 2 days

PayConfirm order

Live playground →API reference

Notifications

PixelToast via useToast()

One hook, four tones, six screen positions. Try it:

Live playground →API reference

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/ui-kit
# Tailwind CSS v4 in your build (Next.js;
# with Vite: tailwindcss @tailwindcss/vite)
npm install -D tailwindcss @tailwindcss/postcss postcss

02Wire styles + provider

// app/globals.css, in place of @import "tailwindcss":
//   @import "@pxlkit/ui-kit/styles.css";
// app/providers.tsx — wrap {children} in app/layout.tsx
'use client';
import { PxlKitSurfaceProvider } from '@pxlkit/ui-kit';
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PxlKitSurfaceProvider surface="pixel">
      {children}
    </PxlKitSurfaceProvider>
  );
}

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="[email protected]" />
<PixelButton tone="green">Ship it</PixelButton>

Step 3, rendered live — the exact code above

Revenue

$12,480

+8.2% this week

Vue or Angular? New in 2.2: the same three steps with @pxlkit/ui-kit-vue or @pxlkit/ui-kit-angular.

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 one surface/tone/density contract, and since 2.2 in Vue and Angular too. 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. Plain SVG, no third-party dependencies, no font loading. Your bundle only carries the icons you import.

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 React layouts. Open, copy, swap, ship.

Dashboards, changelog, docs, full SaaS landing, portfolio, e-commerce — React pages 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 icons

cool-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

trophy

star

sword

shield

heart

coin

crown

lightning

+43more

Feedback

33 icons

@pxlkit/feedback

check-circle

x-circle

info-circle

warning-triangle

error-octagon

bell

+27more

Social

43 icons

@pxlkit/social

heart

heart-broken

thumbs-up

thumbs-down

user

user-group

+37more

Weather

36 icons

@pxlkit/weather

sun

moon

cloud

cloud-sun

rain

snow

+30more

UI

41 icons

@pxlkit/ui

pencil

eraser

paint-bucket

eyedropper

play

+36more

Effects

12 icons

@pxlkit/effects

explosion-burst

radar-ping

flame

glow-pulse

pixel-rain

shockwave

+6more

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

AI Output

React components

111

Icons · 7 packs

226+

Page templates

Built for

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 (Vue & Angular too)
Included: All section templates
Included: Asset attribution required

Indie

perfect for: solo dev shipping one paid product

~~Previous price $19~~$9.50

Included: No attribution needed
Included: 1 commercial project
Included: Lifetime license, updates at purchase
Included: All current icon packs

Team

perfect for: agencies and teams shipping many products

~~Previous price $49~~$24.50

Included: Unlimited commercial projects
Included: All future packs free
Included: Priority support
Included: Logo in README sponsors

BEFORE YOU INSTALL — THE COMMON QUESTIONS

License terms, framework fit, bundle impact, and how the icon licensing actually works.

Is Pxlkit a React library?

Yes. Pxlkit is built React-first: @pxlkit/ui-kit is the reference kit, and the demos and templates on this site are React. New in 2.2, the same components ship for Vue 3 (@pxlkit/ui-kit-vue) and Angular (@pxlkit/ui-kit-angular).

Is Pxlkit really free?

Yes. The code packages (the React UI kit and its new Vue and Angular editions, the icon components and the voxel toolkit) 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 components does the UI kit include?

111 production-ready components: buttons, inputs, selects, switches, sliders, cards, modals, data tables, charts, calendars, steppers, sidebars, timelines, toasts, command palettes, and more — in React, and since 2.2 the same components in Vue and Angular. All TypeScript-first, Tailwind-powered, and fully themed.

What templates are included?

Pxlkit ships 8 section categories — hero, header, footer, CTA, pricing, testimonials, FAQ, and features — with 3 design variants each. Plus 6 complete page templates: full landing, portfolio, admin dashboards, changelog, docs site, and e-commerce.

Are the templates available for Vue and Angular?

Not yet. The 6 page templates and the section snippets are React (Next.js) code; every component they use exists in the Vue and Angular kits too.

Does Pxlkit work with Next.js?

Yes. The React kit works with Next.js — App Router included — Vite, Remix, and any React 18.2+ or 19 setup. In the App Router, wrap the kit's providers in a 'use client' file of your own and keep app/layout.tsx a Server Component; the docs show both files.

Does Pxlkit work with Vue or Angular?

Yes, new in 2.2. @pxlkit/ui-kit-vue (Vue 3.5+, with Vite or Nuxt) and @pxlkit/ui-kit-angular (Angular 20–22, standalone components, zoneless or with zone.js) are the same 111-component kit: the same markup, theme and keyboard behaviour, checked against React by parity tests. @pxlkit/vue and @pxlkit/angular render the icons, and the icon packs are plain data that work in all three.

Will it bloat my bundle?

No. The UI kit and the icon packs are tree-shakeable ES modules — your bundle carries only the components and icons you import — and icons render as plain SVG, with no icon font and no third-party dependencies.

Can I use Pxlkit in a commercial product?

Absolutely. MIT code packages can be used commercially without attribution. If you ship the icon packs and want to remove attribution there too, grab an Indie ($9.50) or Team ($24.50) asset license.

How many icons are included?

226+ hand-crafted 16×16 SVG icons across 7 themed packs.

How do I create custom icons?

Three ways: use the visual builder on our website, let AI generate them with our prompt templates, or hand-code the simple grid + palette JSON format directly.

WHAT'S NEXT: @pxlkit/voxel

A 3D voxel toolkit for React, in early preview and not yet on npm. 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/ui-kit