Web components · No build step

Beautiful slop, straight from AI

Your agent just shipped a static HTML page with seven nested divs and a hero that says “Welcome to the future.” Drop in real components, keep the markup dumb, and make the output look like someone meant it.

Read the docs Theme editor Quick start
dashboard.html Live
Agent draft. Swap div soup for real components below.
Ship it Tweak theme
Same tags your agents can paste into HTML

How it works

From agent output to something you’d actually open

No React install, no Vite config, no “just one more dependency.” Plain HTML pages with custom elements that behave like a real design system.

What you get

Everything an AI page needs.
Nothing your bundler didn’t ask for.

No build step

Raw ES modules via importmap. Host from ui.slopkit.dev or vendor the folder. Agents write tags; browsers load them.

 Shadow DOM by default

Component chrome stays encapsulated. Your page CSS won’t silently zero out card padding or wreck button spacing.

 Themeable tokens

CSS custom properties, light/dark/auto, saved palettes, and a theme editor. One :root override restyles the lot.

 Agent skillsets

Cursor skills document every component category so agents pick the right tag instead of inventing another flexbox div tower.

In the box

The hits, not the entire catalog

Forms, tables, charts, overlays, navigation, chat, dashboards — roughly fifty tags for dashboards, landing pages, and admin shells.

Layout & data Cards, tables, stats, accordions, tabs, steps.
Save Accessible defaults: ARIA, keyboard nav, focus traps in overlays.
New Draft
import '@slopkit/vk-button.js';
 Here’s your dashboard. I used eleven divs for the header. Try vk-page-header instead.

Quick start

Two tags and you’re styling

Link the base stylesheet first (tokens + anti-FOUC cloak), map @slopkit/, import what you need. Or pull in vk-all.js while prototyping.

  • Granular imports — one component or the full catalog
  • Container queries baked into layout primitives
  • Charts via ECharts, diagrams via Mermaid, icons via sprite
Open documentation
<link rel="stylesheet" href="https://ui.slopkit.dev/slopkit-ui.css"> <script type="importmap"> { "imports": { "@slopkit/": "https://ui.slopkit.dev/" } } </script> <vk-button variant="primary">Ship less terrible slop</vk-button> <script type="module"> import '@slopkit/vk-all.js'; </script>

Still hand-rolling div towers?

Point your next agent at the docs, paste a script tag, and let the components do the pretending-to-be-designed part.

Browse docs GitLab