Proof of concept
Your Astro docs, using real Kumo components.
Every interactive control below is the actual @acoyfellow/kumo-svelte
component, rendered by Astro and hydrated in the browser — not a React port and
not a hand-approximated copy of Kumo's tokens. Nothing here is styled by hand:
every class you inspect comes straight from the package. The styling you see is
Kumo's own — exactly what the package emits, no more, no less.
Real components, rendered as-is
These are genuine Kumo buttons, fields, and badges. Open devtools: the only classes present are the ones the compiled package ships.
Honest note: the published build emits a single shared button style for
arbitrary labels — the variant prop is the real API, but its
per-variant color classes are not emitted yet for free-text content. That's
a tracked emitter gap in the compiler, so we don't fake the colors here.
What renders is exactly the package's real button styling.
Badges
The Kumo Badge component, rendered straight from the package.
Honest note: these three render with the same real style on purpose.
The published Badge does not yet map its variant prop to a color
class — it only emits the default pill (plus a couple of fixture-specific
branches). Per-variant badge colors are an emitter gap being tracked upstream.
We refuse to fake them with inline styles, so they look identical — which is
the truth of the current package.
Forms work too
Kumo's Field and Input render server-side and hydrate cleanly
via client:load. No special handling needed on the Svelte path.
Why this matters
The old path forced docs authors to re-approximate Kumo's look by hand because Kumo only shipped React. This repo shows the clean path: consume Kumo's published framework components directly from a plain Astro site — and show them truthfully, gaps and all, rather than papering over emitter holes with hand-styling.
Install & use — the whole recipe
Five lines. This is the entire integration.
npm i @acoyfellow/kumo-svelte
// astro.config.mjs -> integrations: [svelte()]
import { Button, Badge, Field, Input } from '@acoyfellow/kumo-svelte';
import '@acoyfellow/kumo-svelte/styles.css';
// then: <Button client:load variant="primary">Get started</Button>