Klean UI

Klean UI means Kelvin's Lean UI. It is the source-owned component system for The Boring JavaScript Stack: accessible markup, Durable UI behavior, neutral defaults, and Tailwind left directly in your hands.

Vue, React, and Svelte. Three framework-native sources, one Klean contract.

They are equal product targets. Each implementation uses its framework's native conventions while preserving the same semantics, states, anatomy, accessibility outcomes, and source-ownership model—without adding a Klean runtime to the application.

usage.vue

usage.vue

<script setup>
import Button from '@/components/ui/button/Button.vue'
</script>

<template>
  <Button>Continue</Button>
</template>

One behavioral contract, styled with ordinary Tailwind. VitePress renders the source shown on the Button page; the installer selects framework-native Vue, React, or Svelte source for the application.

Installation

Add a component with one command. Klean infers the framework and conventional Boring Stack paths; the files it adds become application source.

Run one command from a Boring Stack application. Klean detects the framework and conventional destination, then adds the framework-native source and its direct dependencies.

Terminal

npx klean-ui add button

Terminal

pnpm dlx klean-ui add button

Terminal

yarn dlx klean-ui add button

Terminal

bunx klean-ui add button

• No initializer or configuration file
• No framework, alias, or theme questions
• No Klean runtime dependency

Already using Klean source? Check, review, and update it safely without adding a manifest or silently replacing local changes.

The contract

• Own the source. Components land in the application as readable files.
• Use the platform. Actions are buttons; navigation is an anchor or the Boring Stack Link.
• Style with Tailwind. There are no visual variant, size, tone, or radius props.
• Prefer conventions. A standard Boring Stack app needs no initializer, manifest, alias questionnaire, or public cn.js.
• Treat accessibility as correctness. Keyboard behavior, focus, naming, state, and reduced motion are release requirements.
• Implement Durable UI. Useful state survives, navigation remains shareable, focus recovers, and failed work rolls back.

Start with Button

Button is the first documented component, not the definition of the library. Its API is intentionally small: choose the truthful element, pass behavioral state, and write the product's design in class.

Explore Button →

Source-owned, not runtime-owned

Klean takes the useful part of the shadcn model—discoverable examples and source ownership—then removes the required initialization ceremony, visual variant matrix, public class helper, and hidden theme prerequisites.

Read the Doctrine for the boundaries behind those choices, Updating for source-aware upgrades, or the CLI reference for the complete command contract.