Visual Kit
FOR APP BUILDERSReact · HTML · Next.js · Vue · no-code

The app parts AI can't get right. Finished.

Drag-and-drop that works with a finger. A table that stays smooth with 100,000 rows. A ⌘K menu, multi-select, date ranges, uploads with retry, toasts and wizards. Plus 24 animated scenes, 84 icons and 14 loaders in one matching style. Your colours, light and dark.

Try every part live
$24.99$39.99launch price · one-time · unlimited projects
93 automated testsNo dependenciesAI-INSTRUCTIONS includedKeyboard + screen reader
Your colours

Pick a colour. Everything follows.

Every scene, icon, loader and component reads four colours. Change them here and watch the whole kit switch, then copy the code into your app (CSS, Tailwind or JSON).

Try it

The 8 hard parts. Use them right here.

These are the pieces AI tools get about 80% right. The last 20% (touch, keyboard, screen readers, edge cases, speed) takes days. Here it's done and tested.

Why not just ask AI?

What you usually get from a quick prompt, and what you get here.

AI tools are great at a first version. These are the details that take the longest to get right, and the ones users notice first.

Typical first versionVisual Kit
Drag cards with a finger without breaking page scrollOften breaks scrollingPress-and-hold, tested
Move cards and pick options with the keyboard onlyUsually missingFull keyboard + announcements
Table with 100,000 rowsFreezes the pageSmooth, ~27 rows in the page
Date ranges on daylight-saving daysOff by one dayDate-safe, tested
Upload cancel, retry and a parallel queueProgress onlyCancel, retry, queue, chunks
Empty states, icons and loaders that matchMixed stylesOne style, your colours
Proof it works"Looks right"93 automated tests
Example app

A whole app screen, built only with the kit.

Included in the download as a starting point: sidebar, stats, booking calendar, AI chat, a 100,000-row customer table, the launch board, uploads, an inbox empty state and a settings wizard. Click around.

With AI tools

Your AI tool already knows how to use it.

The kit comes with AI-INSTRUCTIONS.md: the rules and the full API of every piece. Drop the folder into your project, point Claude, Cursor, Copilot, Lovable, Bolt or v0 at it, and ask in plain words. It uses the finished parts instead of writing shaky new ones.

You type"Read AI-INSTRUCTIONS.md. Add a booking page with the kit's date picker. Get open times from our /api/slots, and show the success scene after someone books."
You type"Find every list in this app that can be empty and add a matching scene with a helpful button."
Plain HTMLReact 18/19Next.jsVueSvelteAstroAngularWordPressWebflow custom code
<!-- two lines to install --> <link rel="stylesheet" href="visual-kit.css"> <script src="visual-kit.js"></script> <!-- then use any piece --> <vk-empty scene="no-projects"></vk-empty> <vk-board storage-key="launch"></vk-board> <vk-table searchable selectable></vk-table> <script> table.rows = customers; // 100,000 is fine uploader.upload = (file, { onProgress, signal }) => myStorage.put(file, { onProgress, signal }); VK.toast.success('Saved'); </script>
What's inside

One download. Everything matches.

8hard components, each with keyboard, touch and screen-reader support
24animated scenes for empty states, onboarding and status screens
84icons in duotone, line and solid, crisp from 16 to 32px
14loaders incl. progress, skeletons and AI "thinking"
Drag-and-drop board. Mouse, touch (press-and-hold, so scrolling still works) and full keyboard, with announcements. Saves itself.
Data table. 100,000 rows at full speed, multi-sort, search, resizable sticky columns, range selection.
⌘K command menu. Fuzzy search, groups, nested pages, recent items, async results.
Multi-select. Chips, create new, max, 10,000 options, works inside a normal form.
Date picker. Single, range with presets, and booking time slots. Safe on daylight-saving days.
Uploader. Drop, paste, previews, progress, cancel, retry, parallel queue, chunked uploads.
Toasts. Stacking, pause on hover, swipe away, promise toasts (saving → saved).
Wizard. Step checks, inline errors, saves a draft (never passwords), smooth steps.
Colour picker + playground. Copy any piece, export your colours to CSS, Tailwind or JSON.
Docs, AI instructions, 11 ready prompts, a React helper, readable source and 93 tests you can run in your browser.
Price

Days of fiddly work, done for $24.99.

One payment, no subscription. Use it in unlimited personal and client projects, including apps you sell. Made in code by OfferBuggy, not AI-generated art.

$24.99$39.99
  • All 8 components + 24 scenes + 84 icons + 14 loaders
  • Colour picker, playground and example app
  • AI-INSTRUCTIONS.md + ready prompts
  • Readable source and tests
  • Instant download (ZIP, 0.3 MB)
Secure checkout with Stripe · instant download
FAQ

Questions

Does it work with React, Next.js or Vue?

Yes. Every piece is a standard web component, so it works in plain HTML, React (a small helper for React 18 is included), Next.js (load it in a client component), Vue, Svelte, Angular, Astro, and no-code tools that allow custom code.

I build with AI and don't write much code. Can I still use it?

Yes, that's who it's made for. Put the folder in your project and tell your AI tool to read AI-INSTRUCTIONS.md. Then ask in plain words, for example "add the kit's file uploader to the settings page". The 11 ready prompts in PROMPTS.txt cover the common jobs.

Can I change the colours and corners?

Yes. Use the colour picker (on this page and in the download) or set four CSS variables. Every scene, icon, loader and component follows. Light, dark and "follow the system" are built in.

Does it upload files or save data anywhere?

No. The kit never sends data anywhere by itself. The uploader calls your own upload function, so files go to your storage (S3, Supabase, Firebase, your API). The board and wizard can save a draft in the visitor's own browser if you turn that on.

Is it accessible?

Every component works with the keyboard and screen readers (correct roles, labels and announcements), has visible focus, respects "reduce motion", and uses touch-friendly sizes on phones.

What can I do with it?

Use it in unlimited personal and commercial projects, including client work and apps you sell. You can't resell or share the kit itself (as a template, library or icon pack).

Is the art made with AI?

No. Every scene, icon and component is drawn and built in code by OfferBuggy.

What if something doesn't work in my project?

Email hello@offerbuggy.com with what you tried and we'll help you get it working.