Kanso UI 🌸

A modern, minimalist React component library inspired by Japanese design principles.

✨ Features

• 🎨 Beautiful Pastel Colors - Sky, Lavender, Sage, Amber, and Coral
• 🔧 Flexible Design System - Mix any color with any variant
• 🎯 TypeScript Native - Fully typed components
• ♿ Accessibility First - Built with a11y in mind
• 🚀 Modern Stack - Vanilla Extract CSS + React 18
• 📖 Comprehensive Docs - Storybook documentation

🚀 Installation

npm install kanso-ui

💡 Quick Start

import { Button, Input } from 'kanso-ui'
import 'kanso-ui/dist/index.css'

function App() {
  return (
    <div>
      <Button color='sky' variant='filled'>
        Hello World
      </Button>

      <Input color='lavender' variant='outline' label='Email' placeholder='john@example.com' />
    </div>
  )
}

🎨 Color Palette

📦 Components

Button

<Button color='sage' variant='outline' size='lg'>
  Click me
</Button>

Props:

• color: 'sky' | 'lavender' | 'sage' | 'amber' | 'coral'
• variant: 'filled' | 'outline' | 'ghost'
• size: 'sm' | 'md' | 'lg'
• fullWidth: boolean
• loading: boolean

Input

<Input color='amber' variant='filled' label='Username' leftIcon='👤' rightIcon='✅' />

Props:

• color: 'sky' | 'lavender' | 'sage' | 'amber' | 'coral'
• variant: 'filled' | 'outline'
• size: 'sm' | 'md' | 'lg'
• label: string
• helperText: string
• errorMessage: string
• leftIcon: ReactNode
• rightIcon: ReactNode

🛠 Development

# Install dependencies
npm install

# Start Storybook
npm run dev

# Run tests
npm test

# Build library
npm run build

# Type check
npm run typecheck

📖 Documentation

Visit our Storybook documentation to explore all components and examples.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Pablo

Kanso (簡素) - Japanese aesthetic principle emphasizing simplicity and naturalness.