Charts, dashboard blocks and pieces for AI agents in plain HTML, CSS and JavaScript. Free and complete, from leal labs.
File cards slide in one by one above the prompt, with a thumbnail and a remove button.
Agent queries and the sources it read, shown live with a timer.
Plan usage limits
Usage by category and plan limits, with the numbers counting up as they scroll in.
Pending, running and done states, with the step list moving forward one at a time.
The p95 of the payment route stayed above 800 ms for 10 minutes starting at 8:59 AM, in the São Paulo region.
The API domain certificate expires on June 18. Renew it first to avoid losing access.
1,180 messages are waiting to send, three times the average of the last four weeks.
Three concentric rings that fill up with the day's goal. Hover a ring to read its progress in the center.
The same idea in miniature: every day of the month gets three rings. The picker changes the month with a transition.
Grid of rounded cells in five accent levels. The tabs switch the granularity with a transition and each cell has a hover tip.
Everything above is the design system running. Hover to pause and play around.Tap a card to stop the strip and play around. It starts scrolling again 2 seconds after you let go.
Funnel, Sankey, radar, radial, gauge and more. Cards with a period picker, hover highlight and numbers that count up, all on the same tokens. Elsewhere this is paid. Here it comes included.
Stages with a layered halo and conversion pills, smooth curves or sharp cuts, and tiles with each column's number.
Rounded bars over a track, with a period toggle, a title that counts up to the value and an outline on hover.
Filled polygon over a hexagonal grid. Hover an axis and the title counts up to its value, with the matching tile highlighted.
Two outline-only series on the same grid. The legend is live: hover a series to isolate it.
Flows colored by source, from work to deliverables. Hover a source or target to isolate its flows.
Two smooth series that draw themselves on entry. Hover a point in time and the title, number and tiles show that moment.
The sales funnel as horizontal bars with an icon, value and share for each stage, plus a grid of tiles.
Concentric rings with the name written along each arc. Hover a ring and the others step back while the title and tile follow.
Stacked series with gradient fills. Hover a month and the title, legend and tiles follow it.
Bars on one axis and a conversion line on the other, so volume and rate read together on one screen.
Half circle of stacked, rounded segments with the largest share in the center. Hover a segment to swap the center.
Bar list with the label inside the bar and the value on the right. Hover a row and the others fade.
Tickets by time to resolution, colored by category. Hover a legend category to isolate it, or a point to see the details.
Shell, panel and tile. Depth comes from the surface, so the card doesn't need a shadow to exist.
The outer corner is the inner one plus the padding: shell 28 is panel 16 plus 12. The curves stay parallel and the eye stops tripping.
Hover and the other items fade, with the title following along. You read one data point at a time.
Change data-accent on the html tag and every component follows. Five leal labs accents, in light and dark themes.
One terminal command, two CDN lines or the skill for your agent. No npm, no build, no account.
Everything, in ./unslop, with the skill in .claude/skills/unslop
curl -fsSL unslop.leallabs.dev/i | shJust one component
curl -fsSL unslop.leallabs.dev/i | sh -s add sankeyIn the <head>
<link rel="stylesheet" href="https://unslop.leallabs.dev/unslop.css">
<script src="https://unslop.leallabs.dev/unslop.js" defer></script>Where the chart goes
<div data-u="funnel" data-u-props='{"stages":[...]}'></div>The full install already drops the skill in .claude/skills/unslop. Your agent starts building screens with these components and tokens instead of making up styles.
curl -fsSL unslop.leallabs.dev/i | shThen ask as usual
> build a sales dashboard with a funnel and a sankey using unslopdata-u where you want the componentThere is no Pro plan. Components, blocks, charts, tokens and the skill are free, no account and no card, under the MIT license. leal labs believes web components shouldn't be a market.
Billed never.