Air Command UI Library

A modern React component library built with TypeScript and CSS Modules.

Typography

This component library uses Inter as the primary font family across all components. Inter is a carefully crafted typeface specifically designed for computer screens and user interfaces.

Font Features

• Weights: 100-900 (Thin to Black)
• Optimized: for digital interfaces and high-resolution screens
• Variable Font: supports modern font features
• Accessibility: excellent readability at all sizes

Usage

The Inter font is automatically loaded when you import any component from this library:

import { Button, ComboBox, Input, Table } from 'air-command-ui-library';

// Inter font is automatically applied to all components

Font Loading

The library uses Google Fonts CDN to load Inter with optimized weights:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

Components

• Button - Interactive buttons with multiple variants
• ComboBox - Dropdown selection component with search
• Input - Form input fields with validation
• Table - Data tables with sorting and filtering

All components are built with:

• ✅ TypeScript for type safety
• ✅ CSS Modules for scoped styling
• ✅ Inter Font for consistent typography
• ✅ Dark/Light theme support
• ✅ Accessibility features

Installation

npm install air-command-ui-library

Quick Start

import { Button, ComboBox } from 'air-command-ui-library';

function App() {
  return (
    <div>
      <Button theme='dark' size='md'>
        Click me
      </Button>

      <ComboBox
        options={[
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' },
        ]}
        theme='light'
        placeholder='Select an option...'
      />
    </div>
  );
}