Klean UI

World-class UI. Source you own. Tailwind you know.

Klean UI means Kelvin's Lean UI. It provides accessible, framework-native components for Vue, React, and Svelte, built for The Boring JavaScript Stack.

Copy the source into your application and style it with Tailwind. Native HTML, keyboard behavior, focus, and Durable UI keep the interaction dependable while you make the design your own.

Preview Live · Vue

View source usage.vue

usage.vue

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

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

Style the component directly with ordinary Tailwind classes.

Installation

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

Run from your application’s directory. Klean detects your framework and copies the matching source.

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

Source you own. Edit the installed files to make them yours.

Already using Klean source? Check, review, and update it safely.

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. Klean detects your Boring Stack framework and component directory.
• Treat accessibility as correctness. Keyboard behavior, focus, naming, state, and reduced motion are part of the component contract.
• Implement Durable UI. Useful state survives, navigation remains shareable, focus recovers, and failed work rolls back.

Start with Button

Button is a useful starting point for learning the Klean contract. Its API is intentionally small: choose the truthful element, pass behavioral state, and write the product's design in class.

Explore Button →

Make it yours

Edit the installed source, style it with Tailwind, and compose it with your application's own markup.

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