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. Perfect for creating game-like interfaces or retro-styled applications.

🎮 Features

Minecraft-inspired design - Pixelated, retro gaming aesthetic
Fully customizable - Easy to style and extend
TypeScript support - Full type definitions included
Lightweight - Minimal dependencies
Accessible - Built with accessibility in mind
Custom scrollbars - Modern dark-themed scrollbars with grid support
Adaptable buttons - Custom dimensions, fonts, and icon support
Grid layouts - Flexible grid system with automatic wrapping

📦 Installation

npm install mc-ui-comatv

🚀 Quick Start

import React from 'react';
import { Button, Container, Scrollbar } 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!')}
      />
      <Scrollbar height="300px" grid={true} gridCols={3}>
        {/* Your content here */}
      </Scrollbar>
    </Container>
  );
}

🧩 Components

Button

A highly customizable button with Minecraft styling and advanced features.

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

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

// Custom dimensions and fonts
<Button 
  label="Custom Button" 
  width={150} 
  height={45} 
  font="MinecraftTen"
  onClick={() => console.log('clicked')} 
/>

// With icons
<Button 
  label="Download" 
  icon="/path/to/icon.png"
  iconPosition="left"
  onClick={() => console.log('download')} 
/>

// Loading state
<Button 
  label="Saving..." 
  loading={true}
  onClick={() => console.log('saving')} 
/>

// 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} />

Props:

label (string) - Button text
variant (string) - 'default' | 'green' | 'red' | 'purple'
width (number|string) - Custom width
height (number|string) - Custom height
font (string) - 'MinecraftRegular' | 'MinecraftTen'
icon (string|ReactNode) - Icon (path or component)
iconPosition (string) - 'left' | 'right'
loading (boolean) - Loading state
disabled (boolean) - Disabled state
fullWidth (boolean) - Full width button
onClick (function) - Click handler
className (string) - Additional CSS classes
style (object) - Inline styles

Scrollbar

A custom scrollbar component with modern dark theme and grid support.

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

// Basic vertical scrollbar
<Scrollbar height="400px">
  {/* Your content here */}
</Scrollbar>

// Horizontal scrollbar
<Scrollbar height="200px" variant="horizontal">
  {/* Wide content */}
</Scrollbar>

// Grid layout with automatic wrapping
<Scrollbar height="400px" grid={true} gridCols={3} gridGap="16px">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div> {/* Automatically wraps to next row */}
</Scrollbar>

Props:

height (string) - Container height
width (string) - Container width
variant (string) - 'vertical' | 'horizontal'
grid (boolean) - Enable grid layout (vertical only)
gridCols (number) - Number of columns (2-6)
gridGap (string) - Gap between grid items
showScrollbar (boolean) - Show/hide scrollbar
onScroll (function) - Scroll event handler
className (string) - Additional CSS classes

Container

A versatile container component for organizing content.

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

// Different sizes
<Container className="small">Small container</Container>
<Container className="large">Large container</Container>
<Container className="compact">Compact container</Container>
<Container className="card">Card-style container</Container>
<Container className="sidebar">Sidebar container</Container>
<Container className="form-container">Form container</Container>

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 and icon arrays.

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

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

Props:

imageSrc (string) - Image source
label (string) - Card title
description (string) - Card description
iconImages (array) - Array of icon image paths
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. To use the styles, import them:

import 'mc-ui-comatv/styles';

You can also 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.

🤝 Contributing

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

📄 License

This project is licensed under the MIT License.

🎯 Roadmap

Add custom scrollbar component
Add adaptable button dimensions
Add grid layout support
Add icon support for buttons and cards
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.