Kanso UI

Introducing Kanso UI

Build Beautiful Interfaces Without Complexity

Thoughtfully designed React components for modern applications. Inspired by Zen aesthetics and engineered for peak developer experience.

Browse Components

ButtonDemo.tsx

import { Button } from "@kanso/ui"
import { ArrowRight } from "lucide-react"

export default function HeroDemo() {
  return (
    <Button variant="default" size="lg">
      Get Started
      <ArrowRight className="size-4" />
    </Button>
  )
}

Simplicity, Engineered.

Each feature is focused on making interfaces clean, robust, accessible, and enjoyable to build.

Accessible by Default

Engineered using Radix and Base UI primitive outlines. Full keyboard navigation and proper screen reader support.

Copy-Paste Components

No complex setup or heavy registry dependencies. Copy the component code directly into your folder structure.

TypeScript First

Fully typed components with explicit contracts. Get code completion and compile-time warnings right in your editor.

Dark Mode Ready

Native class-based dark mode design. Easily adapt color schemes using CSS variables and Tailwind variables.

Beautiful Defaults

Clean, minimalist aesthetics inspired by Zen. Neutral borders, clear indicators, and generous spacing.

Production Ready

Optimized for fast rendering and minimal bundle overhead. Battle-tested component design for scaling web apps.

✦ Zen Interactions

Premium Kanso Effects

Add polish to your interface with our copy-paste motion effects. Experience the interactive previews below and click to view installation guides.

Magnetic Button

Attracts elements smoothly to the user's cursor on hover. Built with spring physics for natural, responsive movement.

View Installation

Shimmer Border

An elegant border lighting outline that cycles continuously. Leverages GPU-accelerated CSS conic-gradients for optimal performance.

Shimmer Border

View Installation

Text Reveal

Fades in text character-by-character as it scrolls into viewport. Uses staggering and subtle blur overrides for readability.

Zenfocus.Pureclarity.KansoUI.

View Installation

Component Showcase

Inspect and interact with premium components. See the exact code that builds them.

ButtonDemo.tsx

import { Button } from "@/components/ui/button"

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button variant="default">Primary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="ghost">Ghost Button</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  )
}

Developer Experience Built First

Start with a single copy-paste operation. Kanso UI elements slot right into standard tailwind structures.

Install Helper Modules

Configure your Tailwind classes with our minimalist configurations and helper package.

Copy and Customise

Grab exact TSX structures and paste them directly into your `/components/ui/` route.

npm install @kanso/ui

index.tsx

import { Button } from "@/components/ui/button"

export default function App() {
  return (
    <div className="flex gap-4 p-8">
      <Button>Primary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

0+Components

0%TypeScript Coverage

WCAGAccessible by Default

MITOpen Source

Trusted by Frontend Engineers

Read what designers and developers say about building interfaces with Kanso UI.

"The layout rules and visual patterns in Kanso UI match exactly what we need for modern enterprise platforms. Simplicity is indeed engineered directly in."

Alexander Boyd

Design Engineer, Linear

"Having WCAG accessibility compliant outlines right out of the box saved us weeks of audit fixing. The styling is perfectly minimal."

Mia Koyama

Lead Frontend, Stripe

"Copy-paste setup means I don't need to add another complex library bundle. I copy precisely the components I need, modify the props, and build."

David Ross

CTO, Vercel Templates

Build Faster. Design Less.

Kanso UI gives you the building blocks for beautiful, high-performance web applications.

Start Building