Light Dark System

Zinc Web Components

A comprehensive library of 88+ web components built with Lit, designed for modern web applications.

npm License

Features

  • 88+ Components - From form controls to data visualization
  • TypeScript First - Full type safety with comprehensive declarations
  • Lit-based - Built on the modern Lit framework for fast, lightweight components
  • Accessible - ARIA compliant with keyboard navigation support
  • Form Integration - Native form controls that work with standard HTML forms
  • Customizable - CSS custom properties and parts for easy styling
  • Theme Support - Light/dark mode built-in
  • Tree-shakeable - Import only what you need

Quick Start

Install Zinc via npm:

npm install @kubex/zinc

Import the components you need:

import '@kubex/zinc/dist/zn.min.js';

Use them in your HTML:

<zn-button color="success">Click Me</zn-button>
<zn-input label="Name" placeholder="Enter your name"></zn-input>
<zn-select label="Country">
  <zn-option value="us">United States</zn-option>
  <zn-option value="uk">United Kingdom</zn-option>
  <zn-option value="ca">Canada</zn-option>
</zn-select>

Component Categories

Form Controls

Complete set of form elements with validation, accessibility, and native form integration:

Layout & Navigation

Build complex layouts with flexible containers and navigation patterns:

Data Display

Present data in clear, interactive formats:

Feedback & Indicators

Communicate state and provide feedback to users:

Utilities

Helper components for common UI patterns:

Why Zinc?

Developer Experience: Comprehensive documentation with live examples, TypeScript support, and intuitive APIs make development fast and enjoyable.

Production Ready: Battle-tested components used in real-world applications with robust error handling and edge case coverage.

Customizable: Every component exposes CSS custom properties and parts for granular styling control without fighting the framework.

Performance: Lightweight components with lazy loading support and optimized rendering for smooth 60fps interactions.

Future Proof: Built on web standards with modern JavaScript features, ensuring long-term compatibility and maintainability.

Browser Support

Zinc works in all modern browsers:

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Opera 76+

For older browsers, you may need polyfills for Web Components and ES2017+ features.

Attribution

Special thanks to the following projects and individuals that help make Zinc possible:

License

Zinc is available under the MIT License.

Getting Help