Pixel Component Library

@surkyl/pixel

A modern, themeable Angular component library with Material Design integration and Tailwind CSS support.

Features

🎨 Comprehensive Theme System - Built-in light/dark themes with full customization
🧩 Standalone Components - Modern Angular standalone components
💨 Tailwind CSS Integration - Portable design tokens and utilities
🎯 Material Design - Seamless integration with Angular Material
📱 Responsive - Mobile-first design approach
♿ Accessible - WCAG 2.1 AA compliant
🚀 Tree-shakeable - Optimized bundle sizes
📘 TypeScript - Full type safety and IntelliSense

Installation

npm install @surkyl/pixel
# or
pnpm add @surkyl/pixel

Quick Start

Import the theme styles in your styles.scss:

@use '@surkyl/pixel/styles/themes';

Use components in your application:

import { PixelHeader, ThemeService } from '@surkyl/pixel/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PixelHeader],
  template: `
    <pixel-header
      [brandName]="'My App'"
      (menuClick)="handleMenuClick()">
    </pixel-header>
  `
})
export class AppComponent {
  constructor(public themeService: ThemeService) {}
}

(Optional) Configure Tailwind with the Pixel preset:

const pixelPreset = require('@surkyl/pixel/tailwind-preset');

module.exports = {
  presets: [pixelPreset],
  // ... your config
};

Components

Header - Application toolbar with user menu
Sidenav - Responsive navigation sidebar
Footer - Application footer
Form Components - Enhanced form controls
Table - Data table with sorting and pagination
Layouts - SPA and multi-column layouts
Theme Toggle - Light/dark mode switcher
And more…

Theme System

The Pixel theme system provides:

CSS variable-based theming
Built-in light and dark themes
Runtime theme switching
Custom theme support
Material Design integration
Tailwind CSS compatibility

// Toggle theme
themeService.toggleTheme();

// Set specific theme
themeService.setTheme('pixel-dark');

// Register custom theme
themeService.registerTheme('my-theme', customThemeConfig);

Documentation

Comprehensive documentation is available in the wiki/pixel/ directory:

Development

Run unit tests:

nx test pixel

Build the library:

nx build pixel

Run tests in watch mode:

nx test pixel --watch

Contributing

See the Contributing Guide for development setup and guidelines.

License

This library is part of the Surkyl AIO project.