About The Project

This is a library of components I have found useful to build web sites quickly.

Built With

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• ![PayPal][PayPal.com]
• 
• 
• 

♿ Accessibility

Pixelated Components is committed to creating inclusive web experiences. All components are built with accessibility in mind and include:

• WCAG 2.1 AA compliance - Components meet web accessibility guidelines
• Keyboard navigation - Full keyboard support for all interactive elements
• Screen reader support - Proper ARIA labels, roles, and semantic HTML
• Focus management - Clear focus indicators and logical tab order
• Color contrast - High contrast ratios for text and interactive elements
• Semantic HTML - Proper use of headings, landmarks, and structural elements

Accessibility Features

• Automatic ARIA label generation
• Focus trap management for modals and overlays
• Skip links for keyboard users
• Reduced motion support for users with vestibular disorders
• High contrast mode compatibility

📦 Installation & Setup

Requirements

• React: 18.0 or higher
• Next.js: 13.0 or higher (recommended)
• Node.js: 18.0 or higher
• TypeScript: 4.9 or higher (optional, but recommended)

Basic Installation

# npm
npm install @pixelated-tech/components

# yarn
yarn add @pixelated-tech/components

# pnpm
pnpm add @pixelated-tech/components

Peer Dependencies

This library requires the following peer dependencies (install if not already present):

npm install react react-dom prop-types

TypeScript Support

This library is written in TypeScript and provides full type definitions. No additional setup required.

Reference Implementation

For a complete working example of Pixelated Components in action, check out the pixelated-admin project. This admin interface demonstrates:

• Component Integration: Real-world usage of all major components
• Configuration Management: Dynamic site configuration with ConfigBuilder
• Page Building: Visual page construction with PageBuilderUI
• Authentication: NextAuth.js integration for secure admin access
• Deployment Ready: Production-ready setup with HTTPS and optimized builds

# Clone the reference implementation
git clone https://github.com/brianwhaley/pixelated-admin.git
cd pixelated-admin
npm install
npm run dev

Visit http://localhost:3006 to explore the admin interface and see components in action.

General Components

Reusable UI components for common patterns:

• Accordion - Expandable content sections using native <details> elements
• Callout - Flexible content highlight blocks with image support
• CSS - Dynamic CSS utilities and styling helpers
• Image - Advanced image component with lazy loading and optimization
• Loading - Progress indicators and loading states
• MicroInteractions - Subtle animations and interaction effects
• Modal - Dialog overlays and popups
• Semantic - Semantic HTML structure components
• SidePanel - Slide-out panel component for additional content
• Table - Data display and table components

CMS Integration

Headless CMS and content management components:

• WordPress - Blog post integration and display with automatic Photon CDN URL processing
• Contentful - Headless CMS components and utilities with delivery and management APIs
• PageBuilder - Dynamic page construction from JSON
• PageEngine - Advanced page rendering with Contentful integration

UI Components

User interface and interaction components:

• Carousel - Image and content sliders (Hero, Reviews, Portfolio)
• Forms - Form builder, validation, and emailer components
• FormBuilder - Advanced form construction and configuration
• FormComponents - Individual form field components and utilities
• FormEngine - Form rendering and processing engine
• Menu - Navigation components (Simple, Accordion, Expando)
• Tab - Tabbed interface component for organizing content
• Tiles - Image grid and tile layouts
• FontSelector - Font selection and Google Fonts integration
• CompoundFontSelector - Advanced font selection with multiple font families

Development Tools

Components for development, configuration, and site building:

• ComponentPropertiesForm - Form for editing component properties
• ComponentSelector - Component selection interface
• ComponentTree - Visual component hierarchy display
• ConfigBuilder - Interactive configuration builder for site settings, metadata, routes, and visual design tokens
• ConfigEngine - Configuration processing and validation engine
• PageBuilderUI - User interface for page building
• SaveLoadSection - Save and load functionality for configurations

SEO & Schema

Search engine optimization and structured data:

• 404 - Custom 404 error page component
• GoogleAnalytics - Google Analytics integration
• GoogleMap - Interactive Google Maps component
• GoogleSearch - Google Custom Search integration
• JSON-LD - Structured data schemas (LocalBusiness, Recipe, BlogPosting, etc.)
• Manifest - Web app manifest generation
• MetaTags - Dynamic meta tag injection
• SchemaBlogPosting - Blog post structured data
• SchemaLocalBusiness - Local business structured data
• SchemaRecipe - Recipe structured data
• SchemaServices - Services structured data
• SchemaWebsite - Website structured data
• Sitemap - XML sitemap generation
• Social Cards - Open Graph and Twitter card generation
• BuzzwordBingo - Interactive buzzword bingo game
• Markdown - Markdown rendering component
• Recipe - Recipe display component
• Resume - Resume/CV display component
• Timeline - Timeline visualization component

Third-Party Integrations

External service integrations:

• Calendly - Scheduling and appointment booking
• Cloudinary - Image optimization and delivery
• GoogleReviews - Google business reviews integration
• Gravatar - User avatar integration
• HubSpot - CRM and marketing automation
• Instagram - Social media image integration
• Flickr - Photo sharing integration
• PayPal - Payment processing
• ShoppingCart - E-commerce shopping cart functionality
• eBay - Store listings and shopping cart
• NerdJokes - Entertainment content integration
• Yelp - Business reviews and ratings

Site Health & Monitoring

Comprehensive site health monitoring and analytics:

• SiteHealthOverview - Dashboard overview of site health metrics
• SiteHealthPerformance - Performance monitoring and optimization insights
• SiteHealthAccessibility - Accessibility compliance testing with axe-core
• SiteHealthSecurity - Security vulnerability scanning and recommendations
• SiteHealthSEO - On-page SEO analysis and scoring
• SiteHealthOnSiteSEO - Advanced on-page SEO metrics (browser caching, gzip compression, mobile-first indexing, etc.)
• SiteHealthGoogleAnalytics - Google Analytics data integration
• SiteHealthGoogleSearchConsole - Google Search Console integration
• SiteHealthCloudwatch - AWS CloudWatch uptime monitoring
• SiteHealthGit - Git repository health and status
• SiteHealthUptime - Uptime monitoring and alerts
• SiteHealthAxeCore - Automated accessibility testing
• SiteHealthDependencyVulnerabilities - Dependency security scanning

🎨 Visual Design Configuration

The ConfigBuilder now includes a Visual Design tab that allows users to configure visual design tokens such as colors, fonts, spacing, and other design system variables. These tokens are stored in the routes.json file under the visualdesign object and can be used throughout your application for consistent theming.

Features:

• Color Management: Primary, secondary, accent colors with color picker inputs
• Typography: Font family and base font size settings
• Spacing & Layout: Border radius, box shadows, transitions
• Form-Based Editing: User-friendly form interface powered by FormEngine
• JSON Storage: Design tokens stored as flattened key-value pairs in routes.json

Usage:

import { ConfigBuilder } from '@pixelated-tech/components';

function MyConfigPage() {
  return <ConfigBuilder />;
}

The visual design tokens can be accessed in your components via the config context or directly from the routes.json file.

� Quick Start

Get up and running in minutes:

# Install the package
npm install @pixelated-tech/components

# Import and use components
import { Accordion, Callout } from '@pixelated-tech/components';

For detailed usage examples and API documentation, see the Component Reference Guide.

Storybook Interactive Demos

Explore all components with live, interactive examples:

# Start Storybook development server
npm run storybook

Access locally at: http://localhost:6006

See the open issues for a full list of proposed features (and known issues).

🚀 Roadmap

See our detailed Roadmap for planned improvements and refactoring initiatives.

🧪 Testing

See our comprehensive Testing Documentation for test coverage, setup, and strategies.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Top contributors:

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Brian Whaley - @brianwhaley - [email protected]

Project Link: https://github.com/brianwhaley/pixelated-components