published

Author: mehediScriptDev

README.md

@@ -1,3 +1,79 @@
 # CrapUi
+
+A small, lightweight collection of React UI building blocks and a Vite starter template for quickly prototyping interfaces.
+
+## Quick Start
+
+Create a new project with one command:
+
+```bash
+npx crap-ui my-app
+cd my-app
+npm run dev
+```
+
+That's it! Your Vite + React + Tailwind project is ready.
+
+## Manual Installation
+
+- **Prerequisites**: Node.js `>=16` and `npm` (or `pnpm` / `yarn`).
+- **Clone the repository**:
+
+```bash
+git clone https://github.com/mehediScriptDev/CrapUi.git
+cd CrapUi
+```
+
+- **Install dependencies**:
+
+```bash
+npm install
+# or: pnpm install
+```
+
+**Project Setup**
+
+- **Run the development server**:
+
+```bash
+npm run dev
+# opens local dev server (Vite)
+```
+
+- **Build for production**:
+
+```bash
+npm run build
+```
+
+- **Preview the production build locally**:
+
+```bash
+npm run preview
+```
+
+- **Quick-start from the template**: the `templates/basic` folder contains a ready-to-use Vite + React setup. To create a new project from the template:
+
+```bash
+cp -R templates/basic my-new-project
+cd my-new-project
+npm install
+npm run dev
+```
+
+- **Key paths**:
+  - `src/` — application source files
+  - `src/Components/` — example UI components (buttons, layout helpers, etc.)
+  - `templates/basic/` — standalone starter template you can copy or adapt
+
+**Benefits**
+
+- **Fast development**: Vite-based setup gives near-instant hot reload and minimal setup time.
+- **Ready examples**: example components live in `src/Components` so you can reuse or extend them.
+- **Template-driven**: `templates/basic` is a drop-in starter for new projects — copy and go.
+- **Small and flexible**: minimal opinionated glue so you can add your preferred styling system easily.
+
+If you want, I can add a short example showing how to import and use a component from `src/Components` in `src/App.jsx`.
+# CrapUi
 A small collection of React + Tailwind components I build daily...simple and reusable.
 <img src="crapui.jpg"/>

bin/create.cjs

@@ -1,8 +1,20 @@
 {
   "name": "crap-ui",
   "private": false,
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
+  "description": "A lightweight Vite + React + Tailwind starter template",
+  "keywords": ["react", "vite", "tailwind", "template", "starter", "scaffold", "boilerplate"],
+  "author": "Mehedi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mehediScriptDev/CrapUi.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mehediScriptDev/CrapUi/issues"
+  },
+  "homepage": "https://github.com/mehediScriptDev/CrapUi#readme",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package.json

@@ -58,14 +58,14 @@ function App() {
 
         {/* GitHub Call-to-Action */}
         <div className="mt-8 flex flex-col items-center justify-center gap-3 text-gray-800 text-lg">
-          <p className="font-medium">
+          <p className="font-medium text-xs text-gray-500">
             If you like this project, consider starring it on GitHub.
           </p>
-          <p className="-mt-4 font-medium">Found an issue? Please report it.</p>
+          <p className="-mt-4 font-medium text-xs text-gray-500">Found an issue? Please report it.</p>
           <Link
             target="_blank"
             to={"https://github.com/mehediScriptDev/CrapUi"}
-            className="inline-flex items-center gap-2 bg-gray-600 justify-center text-white px-4 py-1 rounded-md transition-colors duration-200 "
+            className="inline-flex items-center gap-2 bg-gray-500 justify-center text-white px-4 py-1 rounded-md transition-colors duration-200 "
           >
             <FaGithub className="w-5 h-5" />
             <span>Star</span>