Pixelize Design Library

A comprehensive React component library built with TypeScript, providing a rich set of UI components for modern web applications.

Features

- 🎨 Modern Design System - Consistent and beautiful components
- 📱 Responsive - Mobile-first design approach
- ♿ Accessible - Built with accessibility in mind
- 🔧 TypeScript - Full TypeScript support
- 🎯 Customizable - Easy theming and customization
- 📦 Tree-shakable - Import only what you need

Prerequisites

Before you begin, ensure you have the following installed:

- Node.js (v16 or higher)
- npm (v7 or higher) or yarn
- React (v16.8 or higher)

Installation

Install the library and its peer dependencies:

``bash
npm install pixelize-design-library pixelize-authenticator
`

or with yarn:

`bash
yarn add pixelize-design-library pixelize-authenticator
`

Quick Start

`tsx
import React from 'react';
import { Button, Card, TextInput } from 'pixelize-design-library';

function App() {
return (


);
}

export default App;
`

Components

$3

- Accordion - Collapsible content sections
- Breadcrumbs - Navigation breadcrumb trail
- Card - Container component for content
- Modal - Overlay dialog component
- NavigationBar - Main navigation component
- SideBar - Side navigation panel

$3

- Button - Interactive button component
- ButtonGroupIcon - Icon-based button group
- Checkbox - Checkbox input control
- DatePicker - Date selection component
- Dropdown - Dropdown selection component
- MultiSelect - Multi-selection dropdown
- NumberInput - Numeric input field
- PinInput - PIN/OTP input component
- RadioButton - Radio button input
- RadioButtonGroup - Group of radio buttons
- Search - Search input component
- SearchSelect - Searchable select dropdown
- Select - Single selection dropdown
- Switch - Toggle switch component
- TextInput - Text input field
- InputTextArea - Multi-line text input
- NoteTextArea - Rich text editor

$3

- Table - Data table component
- Timeline - Timeline visualization
- Skeletons - Loading skeleton components
- ProgressBar - Progress indicator

$3

- ApexBarChart - Bar chart component
- ApexPieChart - Pie chart component

$3

- AlertDialog - Alert dialog component (New)
- Loading - Loading spinner component
- Toaster - Toast notification system
- useToaster - Hook for toast management
- ToolTip - Tooltip component

$3

- ProfileCard - User profile card
- ProfilePhotoViewer - Profile photo viewer
- VerifyEmailOtp - Email verification component

$3

- Editor - Rich text editor component

Usage Examples

$3

`tsx
import { Button } from 'pixelize-design-library';

function MyComponent() {
return (



);
}
`

$3

`tsx
import { TextInput, Button, Card } from 'pixelize-design-library';

function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

return (

label="Email"
type="email"
value={email}
onChange={setEmail}
required
/>
label="Password"
type="password"
value={password}
onChange={setPassword}
required
/>

Login


);
}
`

$3

`tsx
import { Table } from 'pixelize-design-library';

const columns = [
{ key: 'name', title: 'Name' },
{ key: 'email', title: 'Email' },
{ key: 'role', title: 'Role' }
];

const data = [
{ name: 'John Doe', email: 'john@example.com', role: 'Admin' },
{ name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
];

function DataTable() {
return (
columns={columns}
data={data}
pagination
searchable
/>
);
}
`

Theming

The library supports custom theming through CSS variables:

`css
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
}
`

TypeScript Support

All components are built with TypeScript and include full type definitions:

`tsx
import { ButtonProps } from 'pixelize-design-library';

interface CustomButtonProps extends ButtonProps {
customProp?: string;
}

function CustomButton({ customProp, ...props }: CustomButtonProps) {
return ;
}
``

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support and questions:
- 📧 Email: support@pixelize.com
- 📖 Documentation: docs.pixelize.com
- 🐛 Issues: GitHub Issues

Changelog

See CHANGELOG.md for a list of changes and updates.