0.0.2 • Published 4 months ago
pixelverse-components v0.0.2
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:
- Fork the repo and create a feature branch.
- Make your changes and test them.
- 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! 🚀