Pixelverse Components

Pixelverse Components is a reusable React component library built with Mantine, TypeScript, and Vite. It provides high-quality, customizable UI components for Next.js 14 and React 18+ applications.

🚀 Features

• 📦 Reusable UI Components – Prebuilt, styled, and customizable.
• ⚡ Optimized for Next.js 14 – Works seamlessly with modern React features.
• 🎨 Built with Mantine – Themeable, accessible, and performant components.
• 🛠 TypeScript Support – Fully typed components and utility functions.
• 🏗 Tree-shakable – Import only what you need to optimize bundle size.

📦 Installation

Public npm (Recommended)

To install the latest version from npm:

npm install @your-scope/pixelverse-components

GitHub Packages (For Private Use)

If using a private GitHub registry:

npm install @your-scope/pixelverse-components --registry=https://npm.pkg.github.com/

Local Development (Linking)

If you're developing locally:

cd /path/to/pixelverse-components
npm link
cd /path/to/your-nextjs-project
npm link @your-scope/pixelverse-components

🔧 Usage

1️⃣ Import a Component

import { FloatingLabelInput } from '@your-scope/pixelverse-components'

export default function MyComponent() {
    return (
        <FloatingLabelInput label="Your Name" placeholder="Enter your name" />
    )
}

2️⃣ Ensure MantineProvider is Wrapped

Since the components use Mantine, wrap your app in MantineProvider.

For Next.js (_app.tsx)

import { MantineProvider } from '@your-scope/pixelverse-components'

export default function MyApp({ Component, pageProps }) {
    return (
        <MantineProvider>
            <Component {...pageProps} />
        </MantineProvider>
    )
}

🛠 Development Setup

If you're contributing to this library, follow these steps:

1️⃣ Clone the Repository

git clone https://github.com/your-org/pixelverse-components.git
cd pixelverse-components

2️⃣ Install Dependencies

npm install

3️⃣ Start Development

Run watch mode for automatic builds:

npm run build -- --watch

4️⃣ Test in a Linked Next.js Project

npm link
cd /path/to/your-nextjs-project
npm link @your-scope/pixelverse-components
npm run dev

📦 Publishing to npm

Ensure you are logged in:

npm login

Then, publish the package:

npm publish --access public

For private npm packages:

npm publish --access restricted

📜 Contributing

We welcome contributions! If you want to improve or add new components:

1. Fork the repo and create a feature branch.
2. Make your changes and test them.
3. Submit a pull request (PR).

🔥 Roadmap

• ✅ Initial Component Library
• 🟡 Add More UI Components (Buttons, Modals, Forms)
• 🟡 Storybook Integration for Component Docs
• 🟡 Automated CI/CD for Releases
• 🟡 Dark Mode Support

📝 License

This project is licensed under the MIT License. See LICENSE for more details.

📞 Need Help?

• Issues: Open an Issue
• Discussions: Join our community chat

Happy coding! 🚀