Is Pxlkit really free?

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 React 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. 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.

Does Pxlkit work with Next.js?

Yes. Pxlkit is built for React with TypeScript and integrates seamlessly with Next.js, Vite, Create React App, Remix, and any React setup.

Will it slow down my app?

No. Every icon and component is tree-shakeable — your final bundle only includes the code you actually import. Icons are pure SVG with zero runtime 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.

Claude Code plugin v1.0.0 · built for ui-kit v2.1.1

Describe it. Ship it.

Five skills that give Claude the real pxlkit API, canonical composition recipes, and scripts that check its own output before you see it.

Install See the five

claude plugin install pxlkit@pxlkitthen/pxlkit:imagine

One command226+ icons111 components

claude

$ claude plugin install pxlkit@pxlkit

✔ installed · 5 skills

> /pxlkit:imagine a pricing page, cyan

✔ preflight — vite · npm · ready

✔ 6 sections planned

✔ 30 components · 8 categories

✔ tsc 0 · build 0 · axe 0

> /pxlkit:audit --fix --visual

✔ types · build · runtime

✔ token purity — 0 raw palette classes

✔ a11y — 0 serious, 0 critical

⚠ 1 fix applied — card href wrapped a button

pixel-perfect

Install: One command

Registers this repository as a marketplace, then installs the plugin from it.

Installbash

claude plugin marketplace add Joangeldelarosa/pxlkit && claude plugin install pxlkit@pxlkit

Restart your session and the five commands appear. Update later with claude plugin update pxlkit.

The suite: Five commands

Each answers one complete intention, not a step in someone else's workflow.

/PXLKIT:IMAGINE

Describe a page and get one built from the real component API — planned as a section-by-section budget first, then measured against floors calibrated from the templates that ship with the kit.

landingsdashboardsgame UI

/pxlkit:startChecks whether this project can run pxlkit at all, then wires it up.

/pxlkit:pixelateSwaps the presentation layer for pxlkit and leaves your logic alone.

/pxlkit:iconAuthors a 16×16 PxlKitData icon that passes both validators before it is written.

/pxlkit:auditRuns the gates the other skills validate against, and can apply the fixes.

/pxlkit:start: Set the project up

Checks whether this project can run pxlkit at all, then wires it up.

What it does

1Classifies the project as ready, repairable or incompatible

2Detects the framework and package manager, because the setup genuinely differs

3Applies the matching recipe: stylesheet, @source directive, providers, fonts, dark mode

4Introduces the other four commands

Arguments

Argument	What it controls
[project directory]	Defaults to the working directory.

Example promptbash

/pxlkit:start

The kit's stylesheet opens with `@import "tailwindcss"` and defines an `@theme`, so it needs a v4 pipeline to compile at all. Migrating v3 to v4 changes how every existing style in your project compiles — that is a decision with real consequences, so the skill explains it and stops rather than doing it as a side effect of adding a component library.

/pxlkit:imagine: Build something new

Composes a page from the real component API, then measures what it built.

What it does

1Reads the kit version your project actually has installed

2Picks sections from recipes extracted from templates that ship

3Writes a component budget as a table before writing any code

4Generates, then runs the audit gates on its own output

5Reports the gate results, including anything still failing

Arguments

Argument	What it controls
[description]	What you want. Plain language.
--from <template>	landing · dashboard · ecommerce · portfolio · docs
--surface pixel\|linear	Chunky retro, or the same components with soft edges.

Example promptbash

/pxlkit:imagine an operations dashboard for a data platform: pipeline health across regions, throughput and latency charts, a runs table with statuses, a command palette, and an inspect drawer. Dense, dark, cyan and green.

Composition decided while typing JSX converges on whatever is easiest to type. A page that names its sections and components up front reaches across the catalogue; one that does not uses the same eight components repeatedly.

/pxlkit:pixelate: Convert what exists

Swaps the presentation layer for pxlkit and leaves your logic alone.

What it does

1Records your test results as a baseline before touching anything

2Maps every source element to its pxlkit equivalent and shows you the table

3Converts incrementally, preserving routes, state, handlers and aria attributes

4Maps your brand palette to tones, or re-skins the tokens to keep your colours

5Verifies your behavioural tests still pass

Arguments

Argument	What it controls
[path]	A file, a directory, or the app root.
--scope page\|component\|app	How much to take on at once.

Example promptbash

/pxlkit:pixelate src/app/dashboard --scope page

No, and that is deliberate. Fetching a page would pull untrusted content into an agent holding write and shell access, where instructions hidden in that content are indistinguishable from yours. It works on local code only.

/pxlkit:icon: Draw an icon

Authors a 16×16 PxlKitData icon that passes both validators before it is written.

What it does

1Searches the 226 shipped icons by tag so you do not redraw one that exists

2Designs the grid, showing it as ASCII while it iterates

3Renders it to SVG and looks at it, because character grids lie

4Validates against a strict superset of both pxlkit validators

5Writes it, and in the monorepo registers it in the pack

Arguments

Argument	What it controls
[name] [description]	Kebab-case name and what it depicts.
--pack <pack>	ui · feedback · social · weather · gamification · effects · parallax
--animated	Multi-frame icon with a trigger.

Example promptbash

/pxlkit:icon habit-streak "a flame with a small counter badge"

You do. The asset licence covers pxlkit's own icon packs; an icon you draw in your project is yours. Using pxlkit's existing icons is the thing that asks for visible attribution.

/pxlkit:audit: Check the result

Runs the gates the other skills validate against, and can apply the fixes.

What it does

1Types, build and runtime — the checks that must pass

2Component diversity and token purity, measured by script

3Screenshots at three widths in light and dark, scored against a visual checklist

4axe-core per route

5A report of rule, file, line and fix

Arguments

Argument	What it controls
[path]	What to audit.
--fix	Apply the mechanical corrections, after showing the diff.
--visual	Include the screenshot pass.

Example promptbash

/pxlkit:audit src/app --fix --visual

It is reported as SKIP, never counted as a pass. The browser gates need a browser, and installing 300 MB of them without asking is not something a skill should do quietly.

In practice: Zero to pixel-perfect

What a first session actually looks like.

Install the plugin30s
Two commands, one paste. Restart the session.
/pxlkit:start1 min
Checks compatibility and wires up the stylesheet, providers, fonts and dark mode for your framework.
/pxlkit:imagine …first result
A page composed from the real API, with the gate results reported honestly.
/pxlkit:icon …when you need one
An icon in the kit’s own format, validated before it is written.
/pxlkit:audit --fix --visualbefore you ship
Types, build, runtime, diversity, token purity, screenshots and axe-core.

Measured, not asserted: What a real run produced

Four archetypes built on a fresh Vite project with the kit installed from npm.

Distinct components

Categories covered

12/12

Raw palette classes

Type errors shipped

Read the full run, including what failed

The write-up records the prompts, the screenshots and the rejections — a landing page that missed the diversity floor, and two layout bugs that compiled cleanly and were only caught by looking at a screenshot.

Real-world demos →

Honestly: What these do not do

The voxel engine and anything 3DThe web icon builderStorybook generationFrameworks without React (Vue, Svelte, Astro without React)

Questions: Before you install

A packaged set of instructions Claude loads when the task calls for it. These five carry a digest of the kit generated from its source, plus scripts that check the output — so the answers come from what pxlkit actually is, not from what a model remembers about pixel art.

TRY IT

claude plugin marketplace add Joangeldelarosa/pxlkit && claude plugin install pxlkit@pxlkit

Agents can read the machine-readable summary at /skills/llms.txt