Automoby Kit

A comprehensive React UI component library built with TypeScript and Tailwind CSS - created in war 2025.

✨ Features

• 🎨 15+ Production-Ready Components - Comprehensive UI library for modern React applications
• 📱 Mobile-First Design - Built-in mobile detection and responsive behavior
• 🎯 TypeScript Native - Full type safety with complete TypeScript definitions
• 🌳 Tree-Shakeable - Import only what you need for optimal bundle size
• 🎨 Tailwind CSS - Styled with Tailwind for easy customization
• ♿ Accessible - ARIA-compliant components following best practices
• 🚀 Modern React 19 - Built for the latest React features

🚀 Installation

npm install automoby-kit

Peer Dependencies

Make sure you have these installed:

npm install react react-dom clsx lucide-react tailwindcss ua-parser-js

📦 Usage

Import All Components

import { 
  Button, 
  Typography, 
  Input, 
  Tabs,
  Dialog,
  Select
} from 'automoby-kit';

function App() {
  return (
    <div>
      <Typography variant="h1">Welcome to Automoby Kit</Typography>
      <Button variant="primary" size="lg">
        Click me!
      </Button>
      <Input placeholder="Enter text..." />
    </div>
  );
}

Import Individual Components (Tree-Shaking)

For better bundle optimization, import components individually:

import { Button } from 'automoby-kit/Button';
import { Typography } from 'automoby-kit/Typography';
import { Input } from 'automoby-kit/Input';

function App() {
  return (
    <div>
      <Typography variant="h1">Optimized Bundle</Typography>
      <Button variant="primary">Click me!</Button>
      <Input placeholder="Type here..." />
    </div>
  );
}

🧩 Available Components

Form Components

• Input - Advanced input fields with label, error states, and various types
• Select - Dropdown select with keyboard navigation and accessibility
• RadioGroup - Radio button groups with customizable options

Navigation Components

• Breadcrumb - Navigation breadcrumbs for showing page hierarchy
• Menu - Context menus and dropdowns with nested support
• Tabs - Tabbed interfaces for organizing content
• Pagination - Page navigation with mobile and desktop variants

Display Components

• Typography - Text rendering with various heading and body styles
• Button - Interactive buttons with multiple variants and sizes
• Chips - Tag-like elements for categories or filters
• Divider - Visual separators for content sections
• Accordion - Collapsible content sections

Overlay Components

• Dialog - Modal dialogs with customizable content and actions
• Drawer - Slide-out panels from any direction
• Backdrop - Overlay backgrounds for modals

🏗️ TypeScript Support

All components come with full TypeScript support and exported types:

import { 
  ButtonProps, 
  ButtonVariant, 
  ButtonSize,
  TypographyProps,
  TypographyVariant,
  InputProps,
  DialogProps,
  SelectProps,
  SelectOption
} from 'automoby-kit';

// Use types in your components
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

// Define variants with type safety
const variant: ButtonVariant = 'primary';
const size: ButtonSize = 'lg';

📱 Mobile Context

The library includes a mobile detection context for responsive behavior:

import { MobileProvider, useMobile } from 'automoby-kit';

function App() {
  return (
    <MobileProvider userAgent={navigator.userAgent}>
      <MyComponent />
    </MobileProvider>
  );
}

function MyComponent() {
  const isMobile = useMobile();
  
  return (
    <div>
      {isMobile ? (
        <p>Mobile View</p>
      ) : (
        <p>Desktop View</p>
      )}
    </div>
  );
}

🎨 Component Examples

Dialog

import { Dialog, DialogButton } from 'automoby-kit';
import { useState } from 'react';

function MyDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="Confirm Action"
      content={<p>Are you sure you want to proceed?</p>}
      buttons={
        <>
          <DialogButton variant="primary" onClick={() => setIsOpen(false)}>
            Confirm
          </DialogButton>
          <DialogButton variant="secondary" onClick={() => setIsOpen(false)}>
            Cancel
          </DialogButton>
        </>
      }
    />
  );
}

Select

import { Select } from 'automoby-kit';

function MySelect() {
  const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];

  return (
    <Select
      label="Choose an option"
      placeholder="Select..."
      options={options}
      onChange={(value) => console.log('Selected:', value)}
    />
  );
}

Pagination

import { Pagination } from 'automoby-kit';

function MyPagination() {
  return (
    <Pagination
      currentPage={1}
      totalPages={10}
      onPageChange={(page) => console.log('Page:', page)}
    />
  );
}

🎯 Available Exports

Components

Button, Typography, Input, Tabs, Drawer, Backdrop, Breadcrumb, Pagination, Accordion, Divider, RadioGroup, Chips, Menu, Dialog, DialogButton, Select

Context Providers

MobileProvider, useMobile

Utilities

cn (classname utility from automoby-kit/utils)

Types

All component props and variants are exported for TypeScript users.

🛠️ Peer Dependencies

{
  "react": "^19.1.0",
  "react-dom": "^19.1.0",
  "clsx": "^2.1.1",
  "lucide-react": "^0.522.0",
  "tailwindcss": "^4.1.10",
  "typescript": "^5.8.3",
  "ua-parser-js": "^2.0.4"
}

📦 Bundle Formats

This package ships with multiple bundle formats:

• ESM - dist/esm - ES Modules for modern bundlers
• CommonJS - dist/cjs - CommonJS for Node.js compatibility
• TypeScript Definitions - dist/types - Complete type definitions

🔧 Configuration

If you're using Next.js 13+, add 'use client' directive when needed (automatically handled in pre-built bundles):

'use client';

import { Button } from 'automoby-kit';

🌟 Why Automoby Kit?

• Battle-Tested - Built during production demands
• Developer Experience - Intuitive API with excellent TypeScript support
• Performance - Optimized bundle size with tree-shaking support
• Modern Stack - Built with latest React 19 and TypeScript 5.8
• Accessible - WCAG compliant components
• Customizable - Easy to theme with Tailwind CSS

🆘 Support

If you encounter any issues:

1. Check the GitHub issues
2. Submit a detailed issue report
3. Provide a minimal reproduction example

👥 Authors

• Ghazal Kordi - Co-creator
• Alireza Mirzaee - Co-creator

📄 License

ISC

🔄 Version History

• 1.0.64 - Current stable release
• 1.0.0 - Initial release

Built with ❤️ in 2025