# SweetScript/Syrup-UI
 A pleasant React UI library based on TailwindCSS

### [🚧 Early phase, still UNDER DEVELOPMENT]

---

## Dependencies

- [React](https://www.npmjs.com/package/react) ^18.2.0
- [TailwindCSS](https://www.npmjs.com/package/tailwindcss): ^3.1.6
- [dayjs](https://www.npmjs.com/package/dayjs): ^1.11.7
- [@react-spring/web](https://www.npmjs.com/package/react-spring): ^9.5.4
- [react-use-measure](https://www.npmjs.com/package/react-use-measure): ^2.1.1
- [cleave.js](https://www.npmjs.com/package/cleave.js): ^1.6.0
- [@use-gesture/react](https://www.npmjs.com/package/@use-gesture/react):  ^10.2.20

---

## Installation

1. Install library

```bash
npm i syrup-ui
```

3. Add tailwind preset: in your `tailwind.config.js` file add the following preset:

```javascript
presets: [
    require('./node_modules/syrup-ui/tailwind-preset.js') //Add this line to the presets property
]
```

3. Import CSS styles: in your main css file add the following import line:

```css
@import "~syrup-ui/styles/styles.css";
```

4. Wrap your app with the ThemeProvider

```javascript
import {ThemeProvider} from 'syrup-ui';

<ThemeProvider>
    <Component {...pageProps} />
</ThemeProvider>
```

## Customization

**Documentation Soon**

## Contact

[majid@sweetscript.com](mailto:majid@sweetscript.com)