🎨 pixelcrate – A Modern React UI Component Library

A *production-ready, customizable, and developer-friendly component library built using React, TypeScript, and styled-components.

Easily integrate pixel-perfect UI components into your app. Ideal for building design systems, internal tools, or rapid prototyping.

🧑‍💻 Created and maintained by @nayanrdeveloper

✨ Features

• ⚛️ Built with React + TypeScript
• 🎨 Styled-components for scoped styling
• 🧱 Reusable components like Button, Badge, Input, and more
• 🛠️ First-class Storybook support for live previews
• 🧪 Supports Vitest for component testing
• 🧹 Fully linted with ESLint, Prettier, and Husky
• 🧰 Auto-deployment of Storybook to GitHub Pages
• 📦 Published on npm

Installation

# Using npm
npm install @nayanrdeveloper/pixelcrate styled-components

# Or using yarn
yarn add @nayanrdeveloper/pixelcrate styled-components

# Or using pnpm
pnpm add @nayanrdeveloper/pixelcrate styled-components

Usage

import React from 'react';
import { Button } from '@nayanrdeveloper/pixelcrate';

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click Me
      </Button>
    </div>
  );
}

📚 Storybook

Run Storybook locally:

npm run storybook

Build Storybook static site:

npm run build-storybook

Visit live Storybook docs here: ➡️ https://nayanrdeveloper.github.io/pixelcrate

🧪 Local Development

Clone the repo and install dependencies:

git clone https://github.com/nayanrdeveloper/pixelcrate.git
cd pixelcrate
npm install

Run Dev Storybook

npm run storybook

Build for Production

npm run build

✅ Code Quality

Linting & Formatting

# Lint
npm run lint

# Format
npm run format

Pre-commit Hooks (Husky + lint-staged)

npm run prepare

🤖 GitHub Actions (CI/CD)

• ✅ Lint & Build on push to dev
• ✅ Auto-deploy Storybook to GitHub Pages
• ✅ Ready for Release automation (Changesets optional)

🤝 Contributing

We welcome all contributions!
Please read our Contributing Guide to get started.

# 1. Clone the repo
git clone https://github.com/nayanrdeveloper/pixelcrate.git

# 2. Install dependencies
npm install

# 3. Create a new branch
git checkout -b feat/new-component

# 4. Run Storybook and develop your component
npm run storybook

# 5. Format & lint
npm run format && npm run lint

# 6. Commit and push
git commit -m "feat: add NewComponent"
git push origin feat/new-component

# 7. Create a PR on GitHub 🚀

📚 Available Components

• ✅ Button
• ⏳ Input (coming soon)
• ⏳ Modal (coming soon)
• ⏳ Tabs (coming soon)

Check the full component list on our Storybook

📄 License

MIT © Nayan Radadiya