# @bodynarf/react.components

> Small library with react components based on Bulma CSS framework 

Latest version **1.16.2** (published 2026-10-09) · 0 weekly downloads

## Install

```sh
npm install @bodynarf/react.components
pnpm add @bodynarf/react.components
yarn add @bodynarf/react.components
bun add @bodynarf/react.components
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.16.2 |
| Published | 2026-10-09 |
| First published | 2022-05-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Artem |
| Maintainers | bodynarf |
| Keywords | ts, typescript, react, react component, bulma |

## Links

- npm: https://www.npmjs.com/package/@bodynarf/react.components
- Repository: https://github.com/bodynar/bodynarf.react-components
- Homepage: https://github.com/bodynar/bodynarf.react-components#readme
- Issues: https://github.com/bodynar/bodynarf.react-components/issues
- npm.io page: https://npm.io/package/@bodynarf/react.components

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.16.2 (latest) — 2026-10-09
- 1.16.1 — 2026-10-09
- 1.16.0 — 2026-10-08
- 1.15.1 — 2026-04-30
- 1.15.0 — 2026-04-22
- 1.14.9 — 2026-04-16
- 1.14.8 — 2026-04-16
- 1.14.7 — 2026-04-16
- 1.14.6 — 2026-03-31
- 1.14.5 — 2026-03-30
- 1.14.4 — 2026-03-24
- 1.14.3 — 2026-02-26
- 1.14.2 — 2026-02-25
- 1.14.1 — 2026-02-12
- 1.14.0 — 2026-02-12
- … 114 more at https://npm.io/package/@bodynarf/react.components/versions

## README

# About
Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
	<img
    	src="https://bulma.io/assets/images/made-with-bulma.png"
    	alt="Made with Bulma"
    	width="128"
    	height="24"/>
</a>

## Installation
1. Install [React](https://reactjs.org/)
2. Install [Bulma](https://bulma.io/)
3. Make sure you imported bulma styles in parent container
4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container


## Demo
Demo of using all components can be found on https://bodynar.github.io/bodynarf.react-components/ (or open latest build in github repository)

## Components
The full catalog of components, CSS utilities and hooks lives in [COMPONENTS.md](./COMPONENTS.md).

## Description
Mostly all components have root css class with `bbr-` prefix. BBR - Bodynarf Bulma React

## Import recommendations

Prefer importing components directly from their folder rather than from the package barrel file.
Direct imports avoid pulling the entire library into the bundle and give bundlers (Vite, webpack, etc.) a clear tree-shaking boundary.

**Bad** — barrel import:
```ts
import { AutoComplete } from "@bodynarf/react.components";
```

**Good** — direct import:
```ts
import AutoComplete from "@bodynarf/react.components/components/primitives/autoComplete";
```

For **types only**, barrel imports are acceptable since they are erased at compile time and have no runtime cost:
```ts
import type { AutoCompleteItem, AutoCompleteProps } from "@bodynarf/react.components";
```

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