PhantomArtist 👻🎨

A modern, flexible React component library built with TypeScript and Emotion CSS. PhantomArtist provides a collection of highly customizable UI components designed for building beautiful, responsive web applications.

✨ Features

• 🎯 TypeScript First - Full TypeScript support with comprehensive type definitions
• 🎨 Emotion CSS - Powerful CSS-in-JS styling with theme support
• 📱 Responsive Design - Mobile-first components with flexible breakpoints
• 🧩 Modular - Import only the components you need
• 🔧 Highly Customizable - Extensive prop interfaces for maximum flexibility
• 📚 Storybook Documentation - Interactive component playground and documentation
• ⚡ Modern Build - Optimized with Rollup for both ESM and CommonJS

🚀 Quick Start

Installation

npm install @collinlucke/phantomartist

Basic Usage

import { Modal, InputField, Button } from '@collinlucke/phantomartist';

function App() {
  return (
    <div>
      <Modal isOpen={true} onClose={() => {}}>
        <h2>Welcome to PhantomArtist!</h2>
        <InputField label="Email" type="email" placeholder="Enter your email" />
        <Button variant="primary">Get Started</Button>
      </Modal>
    </div>
  );
}

📖 Documentation

• Storybook Documentation - Interactive component examples and API documentation
• Live Demo - See PhantomArtist in action in a real application

🛠️ Tech Stack

• React - UI framework
• TypeScript - Type safety and developer experience
• Emotion - CSS-in-JS styling solution
• Rollup - Module bundler for optimized builds
• Storybook - Component development and documentation
• Vite - Fast development and build tooling

📦 Available Components

• Modal - Accessible modal dialogs with customizable styling
• InputField - Flexible form inputs with validation support
• Button - Versatile button component with multiple variants
• Form Components - Complete form building blocks
• ...and more coming soon!

🔗 Related Projects

PhantomArtist is actively used and developed alongside:

• Baphomet UI - Frontend application
• Baphomet Server - GraphQL backend

📄 License

MIT License - see the LICENSE file for details.

Yes, it does look like "Philanthropist" at first glance, and that's perfectly fine! 😄