|
1 | 1 | # CrapUi |
2 | 2 |
|
3 | | -A small, lightweight collection of React UI building blocks and a Vite starter template for quickly prototyping interfaces. |
| 3 | +A simple, ready-to-use Vite + React + React Router starter with Tailwind and Context API. |
4 | 4 |
|
5 | | -## Quick Start |
| 5 | +<p align="center"> |
| 6 | + <img src="templates/basic/public/crapui.png" alt="CrapUi Logo" width="180" /> |
| 7 | +</p> |
6 | 8 |
|
7 | | -Create a new project with one command: |
| 9 | +**Quick Install** |
| 10 | + |
| 11 | +- One-line (no global install): |
8 | 12 |
|
9 | 13 | ```bash |
10 | | -npx crap-ui my-app |
11 | | -cd my-app |
| 14 | +npx crap-ui my-project |
| 15 | +cd my-project |
12 | 16 | npm run dev |
13 | 17 | ``` |
14 | 18 |
|
15 | | -That's it! Your Vite + React + Tailwind project is ready. |
16 | | - |
17 | | -## Manual Installation |
18 | | - |
19 | | -- **Prerequisites**: Node.js `>=16` and `npm` (or `pnpm` / `yarn`). |
20 | | -- **Clone the repository**: |
| 19 | +- Or install CLI globally and run: |
21 | 20 |
|
22 | 21 | ```bash |
23 | | -git clone https://github.com/mehediScriptDev/CrapUi.git |
24 | | -cd CrapUi |
| 22 | +npm install -g crap-ui |
| 23 | +crap-ui my-project |
| 24 | +cd my-project |
| 25 | +npm run dev |
25 | 26 | ``` |
26 | 27 |
|
27 | | -- **Install dependencies**: |
28 | | - |
29 | | -```bash |
30 | | -npm install |
31 | | -# or: pnpm install |
32 | | -``` |
| 28 | +**What this project contains** |
33 | 29 |
|
34 | | -**Project Setup** |
| 30 | +- **Vite** — latest fast dev server and build tooling. |
| 31 | +- **React** (latest) + **React Router** (latest) for routing. |
| 32 | +- **Tailwind CSS** — utility-first styling preconfigured. |
| 33 | +- **Context API** — example auth/context setup included in `src/context`. |
| 34 | +- Example components in `src/Components` and a ready `templates/basic` starter. |
35 | 35 |
|
36 | | -- **Run the development server**: |
| 36 | +**How to use locally (if you cloned this repo)** |
37 | 37 |
|
38 | 38 | ```bash |
| 39 | +git clone https://github.com/mehediScriptDev/CrapUi.git |
| 40 | +cd CrapUi/templates/basic |
| 41 | +npm install |
39 | 42 | npm run dev |
40 | | -# opens local dev server (Vite) |
41 | 43 | ``` |
42 | 44 |
|
43 | | -- **Build for production**: |
| 45 | +**Why use this** |
44 | 46 |
|
45 | | -```bash |
46 | | -npm run build |
47 | | -``` |
| 47 | +- Fast project scaffolding with sensible defaults. |
| 48 | +- Minimal, unopinionated setup so you can add your own libraries. |
| 49 | +- Includes Context API examples to get you started with global state. |
48 | 50 |
|
49 | | -- **Preview the production build locally**: |
| 51 | +**Contributing & Support** |
50 | 52 |
|
51 | | -```bash |
52 | | -npm run preview |
53 | | -``` |
| 53 | +- If you like the project, please star this repo. |
| 54 | +- Found a bug or have a feature idea? Open an issue on GitHub. |
| 55 | +- Contributions are welcome — feel free to open a pull request. |
54 | 56 |
|
55 | | -- **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: |
| 57 | +**License** |
56 | 58 |
|
57 | | -```bash |
58 | | -cp -R templates/basic my-new-project |
59 | | -cd my-new-project |
60 | | -npm install |
61 | | -npm run dev |
62 | | -``` |
63 | | - |
64 | | -- **Key paths**: |
65 | | - - `src/` — application source files |
66 | | - - `src/Components/` — example UI components (buttons, layout helpers, etc.) |
67 | | - - `templates/basic/` — standalone starter template you can copy or adapt |
68 | | - |
69 | | -**Benefits** |
| 59 | +This project is released under the MIT License. |
70 | 60 |
|
71 | | -- **Fast development**: Vite-based setup gives near-instant hot reload and minimal setup time. |
72 | | -- **Ready examples**: example components live in `src/Components` so you can reuse or extend them. |
73 | | -- **Template-driven**: `templates/basic` is a drop-in starter for new projects — copy and go. |
74 | | -- **Small and flexible**: minimal opinionated glue so you can add your preferred styling system easily. |
75 | | - |
76 | | -If you want, I can add a short example showing how to import and use a component from `src/Components` in `src/App.jsx`. |
77 | | -# CrapUi |
78 | | -A small collection of React + Tailwind components I build daily...simple and reusable. |
79 | | -<img src="crapui.jpg"/> |
0 commit comments