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:

npm install pixelize-design-library pixelize-authenticator

or with yarn:

yarn add pixelize-design-library pixelize-authenticator

Quick Start

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

function App() {
  return (
    <div>
      <Card>
        <TextInput placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </Card>
    </div>
  );
}

export default App;

Components

Layout & Navigation

• 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

Form Controls

• 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

Data Display

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

Charts & Visualization

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

Feedback & Status

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

User & Profile

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

Editor

• Editor - Rich text editor component

Usage Examples

Basic Button Usage

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

function MyComponent() {
  return (
    <div>
      <Button variant="primary" size="medium">
        Primary Button
      </Button>
      <Button variant="secondary" size="large">
        Secondary Button
      </Button>
    </div>
  );
}

Form with Validation

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

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

  return (
    <Card>
      <TextInput
        label="Email"
        type="email"
        value={email}
        onChange={setEmail}
        required
      />
      <TextInput
        label="Password"
        type="password"
        value={password}
        onChange={setPassword}
        required
      />
      <Button variant="primary" type="submit">
        Login
      </Button>
    </Card>
  );
}

Data Table

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: '[email protected]', role: 'Admin' },
  { name: 'Jane Smith', email: '[email protected]', role: 'User' }
];

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

Theming

The library supports custom theming through CSS variables:

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

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

interface CustomButtonProps extends ButtonProps {
  customProp?: string;
}

function CustomButton({ customProp, ...props }: CustomButtonProps) {
  return <Button {...props} />;
}

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: [email protected]
• 📖 Documentation: docs.pixelize.com
• 🐛 Issues: GitHub Issues

Changelog

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