🎨 Keypix UI

A premium React component library built with TypeScript, Pure CSS, and Atomic Design principles. The most comprehensive and beautiful UI library available.

Lightweight • Accessible • Customizable • TypeScript • Pure CSS • Zero Config

📖 Documentation • 🎨 Live Demo • 🚀 Quick Start • 💡 Examples

✨ Features

• 🚀 Ultra Lightweight - Only 13.47 KB gzipped
• 🎯 Zero Configuration - Works out of the box
• ♿ Accessible - WCAG 2.1 AA compliant
• 🎨 Beautiful Design - Modern, clean aesthetics
• 🔧 Fully Customizable - CSS variables & themes
• 📱 Responsive - Mobile-first approach
• 🌙 Dark Mode - Built-in theme switching
• ⚡ High Performance - Optimized for speed
• 🔒 Type Safe - Full TypeScript support
• 🧩 Atomic Design - Scalable component architecture

📦 Installation

npm install keypix-ui
# or
yarn add keypix-ui
# or
pnpm add keypix-ui

🚀 Quick Start

1. Install the library

npm install keypix-ui

2. Import and use components

import { Button, Input, Card, ThemeProvider } from 'keypix-ui'

function App() {
  return (
    <ThemeProvider>
      <div className="keypix-p-8">
        <Card>
          <CardHeader>
            <CardTitle>Welcome to Keypix UI</CardTitle>
          </CardHeader>
          <CardContent>
            <Input placeholder="Enter your name" />
            <Button>Get Started</Button>
          </CardContent>
        </Card>
      </div>
    </ThemeProvider>
  )
}

That's it! 🎉 No configuration needed. Styles are automatically injected.

🎯 Auto-Styling

Keypix UI automatically applies global styles when imported, including:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Inter', sans-serif;
}

*:focus,
*:active {
  outline: none;
}

html,
body {
  height: 100%;
}

These styles provide a clean foundation for your application. The Inter font is automatically loaded from Google Fonts.

🎨 Live Demo

See all components in action with our interactive demo:

# Clone the repository
git clone https://github.com/keypix-tech/ui.git
cd keypix-ui

# Install dependencies
npm install

# Start the demo
npm run dev

Then open http://localhost:5173 in your browser to see the complete component showcase with:

• All button variants and states
• Form inputs with validation
• Badges and avatars
• Loading spinners
• Search bars and modals
• Data tables
• Theme switching (Light/Dark/System)
• Responsive design examples

🎨 Components

Atoms

• Button - Versatile button with multiple variants
• Input - Form input with validation states
• Badge - Status indicators and labels
• Avatar - User profile images
• Spinner - Loading indicators

Molecules

• SearchBar - Search input with actions
• Alert - Notification messages
• Modal - Overlay dialogs

Organisms

• Header - Page navigation
• DataTable - Tabular data display

Providers

• ThemeProvider - Theme management

💡 Examples

Basic Button Usage

import { Button } from 'keypix-ui'

// Different variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Different sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With loading state
<Button loading>Processing...</Button>

// With icons
<Button leftIcon={<DownloadIcon />}>Download</Button>

Form with Validation

import { Input, Button, Card } from 'keypix-ui'

function ContactForm() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')

  return (
    <Card>
      <CardHeader>
        <CardTitle>Contact Us</CardTitle>
      </CardHeader>
      <CardContent>
        <Input
          type="email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          error={!!error}
          helperText={error}
        />
        <Button 
          onClick={handleSubmit}
          loading={isSubmitting}
          disabled={!email}
        >
          Send Message
        </Button>
      </CardContent>
    </Card>
  )
}

Theme Switching

import { ThemeProvider, useTheme, Button } from 'keypix-ui'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <div className="keypix-flex keypix-gap-2">
      <Button 
        variant={theme === 'light' ? 'default' : 'outline'}
        onClick={() => setTheme('light')}
      >
        Light
      </Button>
      <Button 
        variant={theme === 'dark' ? 'default' : 'outline'}
        onClick={() => setTheme('dark')}
      >
        Dark
      </Button>
      <Button 
        variant={theme === 'system' ? 'default' : 'outline'}
        onClick={() => setTheme('system')}
      >
        System
      </Button>
    </div>
  )
}

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <ThemeToggle />
      {/* Your app content */}
    </ThemeProvider>
  )
}

🎨 Customization

CSS Variables

Keypix UI uses CSS variables for easy customization:

:root {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... other dark theme variables */
}

Custom Theme

import { ThemeProvider } from 'keypix-ui'

function App() {
  return (
    <ThemeProvider 
      defaultTheme="dark"
      storageKey="my-app-theme"
    >
      {/* Your app */}
    </ThemeProvider>
  )
}

Component Styling

// Using className prop
<Button className="keypix-bg-red-500 hover:keypix-bg-red-600">
  Custom Button
</Button>

// Using CSS variables
<Button style={{ '--primary': '220 13% 91%' }}>
  Custom Primary
</Button>

📱 Responsive Design

All components are mobile-first and responsive:

// Responsive grid
<div className="keypix-grid keypix-grid-cols-1 md:keypix-grid-cols-2 lg:keypix-grid-cols-3 keypix-gap-4">
  <Card>Card 1</Card>
  <Card>Card 2</Card>
  <Card>Card 3</Card>
</div>

// Responsive spacing
<div className="keypix-p-4 md:keypix-p-6 lg:keypix-p-8">
  Content with responsive padding
</div>

♿ Accessibility

Keypix UI is built with accessibility in mind:

• WCAG 2.1 AA compliant
• Keyboard navigation support
• Screen reader friendly
• High contrast mode support
• Reduced motion preferences
• ARIA attributes on all components

// Accessible button with proper labels
<Button 
  aria-label="Download file"
  aria-describedby="download-description"
>
  Download
</Button>
<div id="download-description" className="keypix-sr-only">
  Downloads the current file in PDF format
</div>

🔧 API Reference

Button

interface ButtonProps {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning' | 'info'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon'
  loading?: boolean
  loadingText?: string
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  fullWidth?: boolean
  disabled?: boolean
  ariaLabel?: string
  ariaDescription?: string
  ariaLive?: 'off' | 'polite' | 'assertive'
}

Input

interface InputProps {
  label?: string
  helperText?: string
  error?: boolean
  required?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  // ... all standard input props
}

📖 Full API Documentation

🧪 Testing

import { render, screen } from '@testing-library/react'
import { Button } from 'keypix-ui'

test('renders button with text', () => {
  render(<Button>Click me</Button>)
  expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
})

test('handles click events', () => {
  const handleClick = jest.fn()
  render(<Button onClick={handleClick}>Click me</Button>)
  
  fireEvent.click(screen.getByRole('button'))
  expect(handleClick).toHaveBeenCalledTimes(1)
})

📊 Performance

• Bundle Size: 13.47 KB gzipped
• Loading Time: 264ms on slow 3G
• Runtime: 94ms on Snapdragon 410
• Tree Shaking: Fully supported
• Code Splitting: Automatic

🛠️ Development

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Setup

git clone https://github.com/keypix-tech/ui.git
cd keypix-ui
npm install

Scripts

# Development
npm run dev          # Start development server with demo

# Building
npm run build        # Build library
npm run build:clean  # Clean build

# Testing
npm run test         # Run tests
npm run test:watch   # Watch mode
npm run test:coverage # Coverage report

# Quality
npm run lint         # ESLint
npm run type-check   # TypeScript check
npm run size         # Bundle size analysis

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📋 Contributing Guidelines

📈 Roadmap

• More Components

  • DataGrid
  • DatePicker
  • MultiSelect
  • FileUpload
  • RichTextEditor

• Enhanced Features

  • Animation library
  • Form validation
  • Internationalization
  • Server-side rendering

• Developer Experience

  • CLI tool
  • VS Code extension
  • Figma plugin
  • Design tokens

• Documentation

  • Interactive playground
  • Video tutorials
  • Migration guides
  • Best practices

🤝 Community

• 📖 Documentation
• 🎨 Live Demo
• 🐛 Issues
• 💬 Discussions
• 📧 Email

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Tailwind CSS for the utility-first approach
• shadcn/ui for inspiration
• Radix UI for accessibility patterns
• React for the amazing framework

---

Made with ❤️ by Keypix Team

Website • GitHub • Twitter