natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Readme.md

Browse Source
This commit is contained in:
Natxo
2026-04-04 14:37:31 +02:00
committed by GitHub
parent 95042a2e36
commit a677f5d00b
1 changed files with 2 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
Readme.md
View File

@@ -46,8 +46,7 @@ You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fast
Import only the components you need: Import only the components you need:
```javascript ```javascript
import { $, $mount } from "sigpro"; import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
import { Button, Modal, Input, Alert } from "sigpro-ui";
const App = () => { const App = () => {
const show = $(false); const show = $(false);
@@ -83,8 +82,7 @@ const myApp = () => Table({ items: [], columns: [] });
## Basic Example ## Basic Example
```javascript ```javascript
import { $ } from "sigpro"; import { $, Button, Toast, Div, H1 } from "sigpro-ui";
import { Button, Toast, Div, H1 } from "sigpro-ui";
const App = () => { const App = () => {
const count = $(0); const count = $(0);
@@ -105,86 +103,6 @@ const App = () => {
$mount(App, "#app"); $mount(App, "#app");
``` ```
---
## Components Included
| Category | Components |
| :--- | :--- |
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` |
| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
---
## Component Examples
### Form with validation
```javascript
import { Input, Button } from "sigpro-ui";
const email = $("");
Input({
type: "email",
value: email,
placeholder: "your@email.com",
validate: (v) => !v.includes("@") ? "Invalid email" : null
});
```
### Datepicker with range
```javascript
import { Datepicker } from "sigpro-ui";
const dateRange = $(null);
Datepicker({
range: true,
value: dateRange,
hour: true // Include time selection
});
```
### File upload with drag & drop
```javascript
import { Fileinput } from "sigpro-ui";
Fileinput({
max: 5, // Max size in MB
accept: "image/*",
onSelect: (files) => console.log(files)
});
```
---
## Styling Customization
SigPro UI comes with **Tailwind CSS v4 + daisyUI v5** pre-bundled. You can customize the theme by overriding CSS variables:
```css
/* Override default theme colors */
:root {
--color-primary: oklch(45% .24 277.023);
--color-secondary: oklch(65% .241 354.308);
--color-accent: oklch(77% .152 181.912);
}
/* Or use data attributes for dark/light mode */
[data-theme="dark"] {
--color-base-100: oklch(25.33% .016 252.42);
--color-primary: oklch(58% .233 277.117);
}
```
---
## License ## License
MIT © 2026 **SigPro Team** MIT © 2026 **SigPro Team**