A component library for building consistently styled web apps on Val Town. (Kylä is Finnish for "village.")

Most Val Town apps are assembled fast and without a designer, so they end up looking inconsistent. Kylä gives you opinionated, on-system components so your app looks coherent by default. Accessibility (semantic HTML, label association, visible focus, AA contrast) is a quiet guarantee underneath.

Built for Val Town's reality: no build step. Components are React, styled with runtime Twind + semantic CSS-variable tokens, and consumed by import — no bundler, no codegen.

1. Your HTML shell must load Twind (it has to be present before first paint):

   <script src="https://cdn.twind.style" crossorigin></script>

2. Wrap your app in KylaProvider (it injects the design tokens and owns light/dark mode), then use components:

   /** @jsxImportSource https://esm.sh/react@18.2.0 */
   import { Button, KylaProvider } from "https://esm.town/v/nbbaier/kyla-ui/mod.ts";
   
   export function App() {
     return (
       <KylaProvider>
         <Button variant="primary" onClick={() => alert("hi")}>Save</Button>
       </KylaProvider>
     );
   }

To pin a version, append ?v=NNN to the import URL; the unpinned URL always tracks the latest release (see ADR-0004).

Early. The styling foundation (cn, tw, variants, KylaProvider) and the first component (Button) are in place; the rest of the v1 component set and the real design palette are still to come.

• Button — variant: primary | subtle | ghost | danger, size: sm | md | lg.

• CONTEXT.md — the glossary / shared language.
• docs/v1-design-sketch.md — the design hub + status.
• docs/adr/ — architecture decision records.

The substrate (Radix + Twind + tokens + Provider on Val Town) is proven in a separate spike val, nbbaier/kyla-ui-spike.