npm package: @nayanrdeveloper/pixelcrate
Description: A production-ready React UI component library using styled-components.
Author: Nayan Radadiya
Latest version: 1.0.8

# 🎨 `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**](https://github.com/nayanrdeveloper)

<!-- ![npm](https://img.shields.io/npm/v/@your-scope/pixelcrate)
![license](https://img.shields.io/npm/l/@your-scope/pixelcrate)
![build](https://github.com/your-username/pixelcrate/actions/workflows/ci.yml/badge.svg) -->

---

## ✨ 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

```bash
# 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
```tsx
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:
```bash
npm run storybook
```

Build Storybook static site:
```bash
npm run build-storybook
```

Visit live Storybook docs here:
➡️ https://nayanrdeveloper.github.io/pixelcrate

### 🧪 Local Development
Clone the repo and install dependencies:

```bash
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

```bash
# Lint
npm run lint

# Format
npm run format
```

Pre-commit Hooks (Husky + lint-staged)
```bash
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**](CONTRIBUTING.md) to get started.

```bash
# 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**](https://github.com/nayanrdeveloper)