Update Readme.md
This commit is contained in:
33
Readme.md
33
Readme.md
@@ -24,12 +24,19 @@ To use SigPro UI, your project must include:
|
|||||||
2. **Tailwind CSS v4**: For utility-first styling.
|
2. **Tailwind CSS v4**: For utility-first styling.
|
||||||
3. **daisyUI v5**: The component engine for Tailwind.
|
3. **daisyUI v5**: The component engine for Tailwind.
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Installation
|
## 1. Prerequisites & Installation
|
||||||
|
SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first.
|
||||||
|
|
||||||
### Via Bun or NPM
|
### Step 1: Install SigPro Core
|
||||||
```bash
|
´´´Bash
|
||||||
|
bun add sigpro
|
||||||
|
# or
|
||||||
|
npm install sigpro
|
||||||
|
```
|
||||||
|
### Step 2: Install SigPro UI
|
||||||
|
|
||||||
|
```Bash
|
||||||
bun add sigpro-ui
|
bun add sigpro-ui
|
||||||
# or
|
# or
|
||||||
npm install sigpro-ui
|
npm install sigpro-ui
|
||||||
@@ -40,9 +47,25 @@ npm install sigpro-ui
|
|||||||
<script src="https://unpkg.com/sigpro"></script>
|
<script src="https://unpkg.com/sigpro"></script>
|
||||||
<script src="https://unpkg.com/sigpro-ui"></script>
|
<script src="https://unpkg.com/sigpro-ui"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 2. Styling Setup (Tailwind CSS v4)
|
||||||
|
SigPro UI components rely on **Tailwind CSS** and **daisyUI** for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point.
|
||||||
|
|
||||||
|
Create or edit your global CSS file (e.g., style.css):
|
||||||
|
|
||||||
|
´´´CSS
|
||||||
|
/* src/style.css */
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
|
||||||
|
/* Optional: Your custom theme overrides */
|
||||||
|
:root {
|
||||||
|
--primary: #570df8;
|
||||||
|
--secondary: #f000b8;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
---
|
||||||
## Setup & Usage
|
## Setup & Usage
|
||||||
|
|
||||||
You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
|
You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
|
||||||
|
|||||||
Reference in New Issue
Block a user