# vin-react

> This library is exclusive for react that utilize the flexbox.

Latest version **7.1.8** (published 2026-06-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install vin-react
pnpm add vin-react
yarn add vin-react
bun add vin-react
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.1.8 |
| Published | 2026-06-24 |
| First published | 2023-06-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 115 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Marvin Petate |
| Maintainers | petatemarvin26 |
| Keywords | react, webpack, DOM |

## Links

- npm: https://www.npmjs.com/package/vin-react
- Repository: https://github.com/petatemarvin26/vin-react
- Homepage: https://github.com/petatemarvin26/vin-react#readme
- Issues: https://github.com/petatemarvin26/vin-react/issues
- npm.io page: https://npm.io/package/vin-react

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 7.1.8 (latest) — 2026-06-24
- 7.1.7 — 2026-06-23
- 7.1.6 — 2026-06-07
- 7.1.5 — 2026-06-05
- 7.1.4 — 2026-06-05
- 7.1.3 — 2026-06-01
- 7.1.2 — 2026-06-01
- 7.1.1 — 2026-05-24
- 7.1.0 — 2026-05-24
- 7.0.9 — 2026-05-24
- 7.0.8 — 2026-05-24
- 7.0.7 — 2026-05-24
- 7.0.6 — 2026-05-24
- 7.0.5 — 2026-05-24
- 7.0.4 — 2026-05-24
- … 57 more at https://npm.io/package/vin-react/versions

## README

## VIN-REACT

VIN-REACT is a React component library built around simple, flexbox-first UI primitives and lightweight floating overlays.

## Table Contents

- [Installation](#installation)
- [Features](#features)
- [Examples](#examples)

## Installation

```shell
npm install vin-react
```

## Features

#### Components

- Checkbox
- Dropdown
- Header
- Indicator
- InputText
- Pagination
- Text
- Touchable
- View

#### Floating Components

- Modal
- Toast

## Examples

##### `Checkbox`

```tsx
import {Checkbox} from 'vin-react';

const App: React.FC = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <Checkbox label='Accept terms' value={checked} onChange={setChecked} />
    </div>
  );
};
```

##### `Dropdown`

```tsx
import {Dropdown} from 'vin-react';

const items = [
  {label: 'One', value: 1},
  {label: 'Two', value: 2}
];

const App: React.FC = () => {
  const [selected, setSelected] = useState(items[0]);

  return (
    <div>
      <Dropdown
        items={items}
        selected={selected}
        onSelect={(item) => setSelected(item)}
      />
    </div>
  );
};
```

##### `Indicator`

```tsx
import {Indicator} from 'vin-react';

const App: React.FC = () => {
  return (
    <div>
      <Indicator.Bar width={250} height={10} cornerStyle='round' animating />
      <Indicator.Bar width={250} height={10} progress={0.5} />
      <Indicator.CircleSnail
        size={100}
        thickness={10}
        cornerStyle='round'
        animating
      />
      <Indicator.CircleSnail size={100} thickness={10} progress={0.5} />
    </div>
  );
};
```

##### `InputText`

```tsx
import {InputText} from 'vin-react';

const App: React.FC = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <InputText placeholder='Enter text' onChangeText={setValue} />
    </div>
  );
};
```

##### `Pagination`

```tsx
import {Pagination} from 'vin-react';

const App: React.FC = () => {
  return (
    <div>
      <Pagination totalPages={10} maxDisplay={5} fontSize='1rem' />
    </div>
  );
};
```

##### `Touchable`

```tsx
import {Touchable} from 'vin-react';

const App: React.FC = () => {
  return (
    <div>
      <Touchable onClick={() => console.log('CLICK')}>Click Me</Touchable>
    </div>
  );
};
```

##### `View`

```tsx
import {View} from 'vin-react';

const App: React.FC = () => {
  return (
    <View className='container'>
      <p>Content inside a View</p>
    </View>
  );
};
```

##### Floating

```tsx
import {Modal, Toast} from 'vin-react';

const App: React.FC = () => {
  return (
    <Modal.Provider>
      <Toast.Provider>
        <YourApp />
      </Toast.Provider>
    </Modal.Provider>
  );
};

const YourApp: React.FC = () => {
  const {showModal} = useContext(Modal.Context);
  const {showToast} = useContext(Toast.Context);

  showModal(<MyModal />);
  showToast('Hello World!', {title: 'INFO'});
};
```

> NOTE: Wrap your app with `Modal.Provider` and `Toast.Provider` so floating overlays render correctly.

## Contributing

Unfortunately we are not accepting any contributors yet this is under probitionary, but for your concerns and possible suggestions you may raise the issue on our github

## Changelog

We're using github [release][github-release] and based on [semantic versioning][semantic-version]

## Author

[Marvin Petate][marvin-petate]

## License

[ISC][license]

[ws]: https://www.npmjs.com/package/ws
[nodejs]: https://nodejs.org/en
[github-release]: https://github.com/petatemarvin26/vin-react/releases
[license]: ./LICENSE
[semantic-version]: https://semver.org/
[marvin-petate]: https://marvin-petate.web.app

---
_Source: https://npm.io/package/vin-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._