open-index/open-npm huggingface dataset:
npm package: @kushki/suka-material-ui-theme
Description: Suk'a Material UI theme
Author: Kushki
Latest version: 1.0.4

## What am I looking at? 🤔

A Material-UI theme for Suk'a Design System

## Getting the theme

```bash
npm i suka-material-ui-theme --save
```

or

```bash
yarn add suka-material-ui-theme
```

Your have to also install the IBM Plex Sans typography:

```bash
npm i fontsource-ibm-plex-sans
```

After installing [@kushki/suka-material-ui-theme](https://www.npmjs.com/package/@kushki/suka-material-ui-theme),
import it:

```js
import { sukaTheme } from "@kushki/suka-material-ui-theme";
```

Don't forget to also import the font within your app entry file or site component:

```js
import "fontsource-ibm-plex-sans"
```

## Using the theme

The theme exports an named export `sukaTheme` that
calls [`createMuiTheme`](https://material-ui.com/customization/themes/#createmuitheme-options-theme) under the hood.

To use this theme, you need to pass it as the `theme` prop to
[`muiThemeProvider`](https://material-ui.com/customization/themes/#muithemeprovider):

```js
<MuiThemeProvider theme={sukaTheme}>
  // ... your app here
</MuiThemeProvider>
```

See [the Material-UI docs on themes](https://material-ui.com/customization/themes/) for more details.

It also exports different variables for us, like `pallete`, `borderRadius`, `typography` for use inside your code like:

```js
import { pallete } from '@kushki/suka-material-ui-theme'

const CustomBox = ({ children }) => <div styles={{ background: pallete.secondary.main }}>{ children }</div>
```
npm package: @kushki/suka-react-system-icons
Description: React component for Suk'a system icons
Author: Kushki
Latest version: 1.0.5

## Suka React System Icons

[![Edit Suk'a React System Icons](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/suka-react-system-icons-j3f73?fontsize=14&hidenavigation=1&theme=dark)

`suka-react-system-icons` is a collection of simply beautiful open source icons for React.js based on the system icons from the [Suk'a design system](https://suka.kushkipagos.com). Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

#### Based on Feather Icons  ```v4.28.0```

### Installation
    yarn add @kushki/suka-react-system-icons

  or

    npm i @kushki/suka-react-system-icons

### Usage

```javascript
import React from 'react';
import { Camera } from '@kushki/suka-react-system-icons';

const App = () => {
  return <Camera />
};

export default App;
```

Icons can be configured with inline props:
```javascript
<Camera color="red" size={48} />
```

If you can't use ES6 imports, it's possible to include icons from the compiled folder ./dist.
```javascript
var Camera = require('@kushki/suka-react-system-icons/dist/icons/camera').default;

var MyComponent = React.createClass({
  render: function () {
    return (
      <Camera />
    );
  }
});
```
You can also include the whole icon pack:

```javascript
import React from 'react';
import * as Icon from '@kushki/suka-react-system-icons';

const App = () => {
  return <Icon.Camera />
};

export default App;
```
npm package: @kushnarang/css
Description: Simple CSS addition from JavaScript.
Author: Kush Narang
Latest version: 1.0.1

# css
Simple CSS addition from JavaScript.

### Importing

1. Download the css.min.js and host it yourself (preferred)
2. Use a public CDN such as jsdelivr ``` https://cdn.jsdelivr.net/npm/@kushnarang/css@1.0.0/dist/css.min.js ``` (not preferred)


### Usage
The one and only parameter is the CSS you want to add (in the form of a **string**). 

```

css("body { background: purple }");

// or

css("#header { color: red }");

// or

// whatever CSS you want

```

### Compatablity

|||
|--|--|
|Internet Explorer|9+|
|Chrome|4+|
|Firefox|3+|
|Safari|4+|
npm package: @kushsoni-rndev/rnstyles
Description: A lightweight Tailwind-style utility-based styling library for React Native, React, Next.js, Expo, and Electron. Supports full class names, shorthand (Tailwind-style), responsive styles, custom fonts, and dark/light modes.
Author: kushsoni-rndev
Latest version: 1.0.5

# rnstyles

`rnstyles` is a lightweight, utility-first, responsive styling library for **React Native**, **React**, **Next.js**, **Expo**, and **Electron**. It mimics the functionality of **Tailwind CSS** and allows you to use utility classes for styling, including full class names, shorthand (Tailwind-style), responsive styles, custom fonts, and dark/light modes.

---

## Features

- Utility-first styling similar to **Tailwind CSS**.
- Support for responsive styles across different screen sizes.
- Custom fonts support.
- Dark and light mode support.
- Compatible with **React Native**, **React**, **Next.js**, **Expo**, and **Electron**.

---

## Installation

To install `rnstyles`, you can use **npm** or **yarn**.

### Using npm:

```bash
npm install rnstyles
```

#### Usage:

### **What's Added:**

1. **React Native Example**: A sample React Native component using `rnstyles` to apply utility classes (`applyStyles` and `tw`).

   ```javascript
   import React from "react";
   import { View, Text } from "react-native";
   import { applyStyles } from "rnstyles";

   const MyComponent = () => {
     return (
       <View style={applyStyles("bg-blue-500 p-4")}>
         <Text style={applyStyles("text-white font-serif")}>
           Hello, React Native World!
         </Text>
       </View>
     );
   };
   ```

2. **React Example**:

   ```javascript
   import { tw } from "rnstyles";

   const MyComponent = () => {
     return (
       <div className={tw("bg-blue-500 text-white p-4 rounded-md")}>
         Hello, World!
       </div>
     );
   };
   ```