🎨 Keypix UI

Keypix UI Demo

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

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

✨ Features

📦 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>
 )
}

🎯 Auto-Styling

* {
 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%;
}

🎨 Live 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

🎨 Components

Atoms

Molecules

Organisms

Providers

💡 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

: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

// 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

// 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
}

🧪 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: /clickme/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

🛠️ Development

Prerequisites

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

📈 Roadmap

🤝 Community

📄 License

🙏 Acknowledgments

Made with ❤️ by Keypix Team

Website • GitHub • Twitter