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
- π 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
npm install keypix-ui
# or
yarn add keypix-ui
# or
pnpm add keypix-ui
npm install keypix-ui
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.
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.
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
- Button - Versatile button with multiple variants
- Input - Form input with validation states
- Badge - Status indicators and labels
- Avatar - User profile images
- Spinner - Loading indicators
- ThemeProvider - Theme management
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>
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>
)
}
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>
)
}
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 */
}
import { ThemeProvider } from 'keypix-ui'
function App() {
return (
<ThemeProvider
defaultTheme="dark"
storageKey="my-app-theme"
>
{/* Your app */}
</ThemeProvider>
)
}
// 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>
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>
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>
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'
}
interface InputProps {
label?: string
helperText?: string
error?: boolean
required?: boolean
leftIcon?: React.ReactNode
rightIcon?: React.ReactNode
// ... all standard input props
}
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)
})
- Bundle Size: 13.47 KB gzipped
- Loading Time: 264ms on slow 3G
- Runtime: 94ms on Snapdragon 410
- Tree Shaking: Fully supported
- Code Splitting: Automatic
- Node.js 18+
- npm/yarn/pnpm
git clone https://github.com/keypix-tech/ui.git
cd keypix-ui
npm install
# 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
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
-
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
MIT License - see the LICENSE file for details.
- 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