Package Exports

mc-ui-comatv
mc-ui-comatv/fonts
mc-ui-comatv/styles

Readme

MC UI ComaTV 🎮

A collection of Minecraft-styled React UI components with pixelated design and authentic Minecraft fonts. Perfect for creating game-like interfaces, retro-styled applications, or Minecraft-themed projects.

🎮 Features

Minecraft-inspired design - Pixelated, retro gaming aesthetic
Authentic Minecraft fonts - Includes MinecraftRegular and MinecraftTen fonts
Fully customizable - Easy to style and extend with custom dimensions
Zero padding/margin by default - No unwanted spacing issues
TypeScript support - Full type definitions included
Lightweight - Minimal dependencies
Accessible - Built with accessibility in mind

📦 Installation

npm install mc-ui-comatv

🚀 Quick Start

import React from 'react';
import { Button, Container } from 'mc-ui-comatv';
import 'mc-ui-comatv/styles';

function App() {
  return (
    <Container className="large">
      <h2>Welcome to Minecraft UI!</h2>
      <Button 
        label="Click me!" 
        onClick={() => alert('Hello!')}
      />
    </Container>
  );
}

🧩 Components

Button

A customizable button with Minecraft styling and authentic fonts.

import { Button } from 'mc-ui-comatv';

// Basic usage
<Button label="Click me" onClick={() => console.log('clicked')} />

// With variants
<Button label="Green Button" variant="green" />
<Button label="Red Button" variant="red" />
<Button label="Purple Button" variant="purple" />

// Disabled state
<Button label="Disabled" disabled={true} />

// Custom font
<Button 
  label="Bold Text" 
  fontFamily="MinecraftTen"
  style={{ width: '200px' }}
/>

Props:

label (string) - Button text
variant (string) - 'default' | 'green' | 'red' | 'purple'
disabled (boolean) - Disabled state
onClick (function) - Click handler
className (string) - Additional CSS classes
style (object) - Inline styles
fontFamily (string) - Font family ('MinecraftRegular' or 'MinecraftTen')

Container

A versatile container component for organizing content with customizable dimensions and styling.

import { Container } from 'mc-ui-comatv';

// Basic usage
<Container>Content here</Container>

// Different sizes
<Container className="small">Small container</Container>
<Container className="large">Large container</Container>
<Container className="compact">Compact container</Container>

// Different variants
<Container className="card">Card-style container</Container>
<Container className="sidebar">Sidebar container</Container>
<Container className="form-container">Form container</Container>

// Custom dimensions and styling
<Container 
  width="300px" 
  height="200px" 
  fontFamily="MinecraftTen"
  padding="20px"
  margin="10px"
>
  Custom sized container
</Container>

Props:

children (ReactNode) - Content to display
className (string) - Additional CSS classes
style (object) - Inline styles
variant (string) - Container style variant
size (string) - Size variant ('small', 'large', 'compact')
width (string) - Container width (default: 'auto')
height (string) - Container height (default: 'auto')
fontFamily (string) - Font family ('MinecraftRegular' or 'MinecraftTen')
padding (string) - Padding (default: '0')
margin (string) - Margin (default: '0')

Checkbox

A Minecraft-styled checkbox component.

import { Checkbox } from 'mc-ui-comatv';

<Checkbox 
  label="Accept terms" 
  checked={checked}
  onChange={(checked) => setChecked(checked)}
/>

// Disabled state
<Checkbox 
  label="Disabled checkbox" 
  disabled={true}
  checked={true}
/>

Props:

label (string) - Checkbox label
checked (boolean) - Checked state
onChange (function) - Change handler
disabled (boolean) - Disabled state

Input

A text input with Minecraft styling.

import { Input } from 'mc-ui-comatv';

<Input 
  placeholder="Enter text..."
  onChange={(value) => console.log(value)}
/>

// With error state
<Input 
  placeholder="Error input"
  error={true}
  onChange={(value) => console.log(value)}
/>

// Disabled state
<Input 
  placeholder="Disabled"
  disabled={true}
  onChange={(value) => console.log(value)}
/>

Props:

placeholder (string) - Placeholder text
onChange (function) - Change handler
error (boolean) - Error state
disabled (boolean) - Disabled state

Toggle

A toggle switch component.

import { Toggle } from 'mc-ui-comatv';

<Toggle checked={isOn} onChange={(checked) => setIsOn(checked)} />

Slider

A slider component for numeric inputs.

import { Slider } from 'mc-ui-comatv';

<Slider 
  value={50} 
  onChange={(value) => console.log(value)}
/>

A dropdown/select component.

import { Dropdown } from 'mc-ui-comatv';

<Dropdown 
  header="Select option"
  label="Choose..."
  options={["Option 1", "Option 2", "Option 3"]}
  onSelect={(option) => console.log(option)}
/>

// Dark variant
<Dropdown 
  header="Dark dropdown"
  label="Choose..."
  options={["Option 1", "Option 2"]}
  dark={true}
  onSelect={(option) => console.log(option)}
/>

// Disabled state
<Dropdown 
  header="Disabled"
  label="Choose..."
  options={["Option 1", "Option 2"]}
  disabled={true}
  onSelect={(option) => console.log(option)}
/>

Props:

header (string) - Dropdown header
label (string) - Dropdown label
options (array) - Available options
onSelect (function) - Selection handler
dark (boolean) - Dark theme
disabled (boolean) - Disabled state

ImageCard

A card component for displaying images with descriptions.

import { ImageCard } from 'mc-ui-comatv';

<ImageCard
  imageSrc="/path/to/image.png"
  label="Card Title"
  description="This is a description of the card"
  onClick={() => console.log('Card clicked')}
/>

Props:

imageSrc (string) - Image source
label (string) - Card title
description (string) - Card description
onClick (function) - Click handler

LoadingBar

A progress bar component.

import { LoadingBar } from 'mc-ui-comatv';

<LoadingBar progress={75} variant="blue" />

Props:

progress (number) - Progress percentage (0-100)
variant (string) - Color variant

MessageBox

A message component for chat-like interfaces.

import { MessageBox } from 'mc-ui-comatv';

<MessageBox 
  message="Hello world!"
  type="info"
  direction="left"
/>

// Different types
<MessageBox message="Success!" type="success" direction="right" />
<MessageBox message="Warning!" type="warning" direction="left" />
<MessageBox message="Error!" type="error" direction="left" />

Props:

message (string) - Message text
type (string) - 'info' | 'success' | 'warning' | 'error'
direction (string) - 'left' | 'right'

🎨 Styling

The components come with built-in Minecraft-styled CSS and fonts. To use the styles, import them:

import 'mc-ui-comatv/styles';

Fonts

The package includes authentic Minecraft fonts:

MinecraftRegular - Standard Minecraft font
MinecraftTen - Bold Minecraft font

You can use these fonts in any component:

<Button fontFamily="MinecraftTen" label="Bold Text" />
<Container fontFamily="MinecraftRegular">Regular text</Container>

Customization

You can customize the components using CSS classes or inline styles:

<Button 
  label="Custom Button" 
  className="my-custom-class"
  style={{ backgroundColor: '#ff0000' }}
/>

📚 Examples

Check out the demo in the src/Home.jsx file for comprehensive examples of all components.

Advanced Usage Examples

// Custom Container with specific dimensions
<Container 
  width="400px" 
  height="300px" 
  fontFamily="MinecraftTen"
  padding="20px"
  margin="10px"
  className="card"
>
  <h2>Custom Container</h2>
  <p>This container has specific dimensions and styling</p>
</Container>

// Button with custom styling
<Button 
  label="Custom Button" 
  variant="green"
  fontFamily="MinecraftTen"
  style={{ 
    width: '200px', 
    height: '50px',
    fontSize: '18px'
  }}
  onClick={() => console.log('Custom button clicked')}
/>

// Form with multiple components
<Container className="form-container" padding="20px">
  <h2>User Registration</h2>
  <Input placeholder="Username" onChange={(value) => console.log(value)} />
  <Input placeholder="Email" onChange={(value) => console.log(value)} />
  <Checkbox label="Accept terms" onChange={(checked) => console.log(checked)} />
  <Button label="Register" variant="green" />
</Container>

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🎯 Roadmap

✅ Customizable Container dimensions
✅ Minecraft font integration
✅ Zero padding/margin by default
Add more component variants
Add animation support
Add theme customization
Add more accessibility features
Add unit tests

📞 Support

If you have any questions or need help, please open an issue on GitHub.

🔧 Troubleshooting

If you encounter any issues, check out the TROUBLESHOOTING.md file for common solutions.

Common Issues

Fonts not loading: Make sure you've imported the styles
```
import 'mc-ui-comatv/styles';
```
Container spacing issues: The Container component now has zero padding/margin by default. Add your own spacing as needed:
```
<Container padding="20px" margin="10px">
  Content here
</Container>
```
React not defined error: Make sure you're using React 16.8+ and have imported React in your components.

📦 Version History

v1.1.0 - Added customizable Container dimensions, removed padding/margin defaults, integrated Minecraft fonts
v1.0.5 - Fixed font loading issues
v1.0.0 - Initial release