{"id":11657,"library":"react-bulma-components","title":"React Bulma Components","description":"React Bulma Components is a library providing a comprehensive set of React components that directly implement the Bulma CSS framework, offering a declarative way to build user interfaces adhering to Bulma's design principles. The current stable version is 4.1.0, actively receiving patch and minor updates, with major versions (like v4.0.0) introducing significant breaking changes. Key differentiators include its compatibility across popular React frameworks such as Gatsby, Create React App, and Next.js. Since version 4, the library supports tree-shaking by default, optimizing bundle sizes. It also provides a unique `domRef` prop for passing refs to underlying DOM elements, bypassing React's `forwardRef` to reduce overhead in the React Dev Tools. Developers should note that some component APIs or naming conventions might diverge from official Bulma documentation, necessitating consultation of its Storybook documentation. The library expects Bulma CSS to be provided externally as a peer dependency, offering flexibility for custom SASS setups.","status":"active","version":"4.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/couds/react-bulma-components","tags":["javascript","react","bulma","bulma.io","css","bootstrap","modal","layout","responsive","typescript"],"install":[{"cmd":"npm install react-bulma-components","lang":"bash","label":"npm"},{"cmd":"yarn add react-bulma-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-bulma-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required CSS framework for styling components.","package":"bulma","optional":false},{"reason":"Used for runtime type checking of component props.","package":"prop-types","optional":false},{"reason":"Core React library for component rendering.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Named imports are recommended for tree-shaking, which is enabled by default since v4.0.0.","wrong":"const Button = require('react-bulma-components').Button;","symbol":"Button","correct":"import { Button } from 'react-bulma-components';"},{"note":"Form-related components (Input, Field, Control, Label) are nested properties of the 'Form' export and must be destructured from it.","wrong":"import { Input } from 'react-bulma-components';","symbol":"Form.Input","correct":"import { Form } from 'react-bulma-components';\nconst { Input, Field } = Form;"},{"note":"Older versions might have used specific deep import paths. Since v4, direct named imports are the standard for all components to leverage tree-shaking.","wrong":"import Columns from 'react-bulma-components/lib/components/Columns';","symbol":"Columns","correct":"import { Columns } from 'react-bulma-components';"}],"quickstart":{"code":"import React from 'react';\nimport 'bulma/css/bulma.min.css';\nimport { Button, Box, Section, Container } from 'react-bulma-components';\n\nconst App = () => {\n  return (\n    <Section>\n      <Container>\n        <Box>\n          <p className=\"title is-4\">Welcome to React Bulma Components</p>\n          <Button color=\"primary\" onClick={() => alert('Hello Bulma!')}>\n            Click Me\n          </Button>\n          {' '}\n          <Button color=\"link\" renderAs=\"a\" href=\"https://react-bulma.dev/\" target=\"_blank\" rel=\"noopener noreferrer\">\n            Visit Docs\n          </Button>\n        </Box>\n      </Container>\n    </Section>\n  );\n};\n\nexport default App;","lang":"javascript","description":"This quickstart demonstrates how to import and use several core components like Button, Box, Section, and Container, while also ensuring the necessary Bulma CSS is loaded. It illustrates basic component composition and prop usage."},"warnings":[{"fix":"Install Bulma via npm: `npm install bulma` and import it in your entry file: `import 'bulma/css/bulma.min.css';`","message":"Bulma CSS is no longer bundled with the library and has been moved to a peer dependency. You must install and import Bulma CSS separately in your project.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Migrate any usage of `<List />` to standard HTML list elements or implement a custom React component based on Bulma's list styling guidelines.","message":"The `<List />` component has been completely removed in version 4.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace `ref={myRef}` with `domRef={myRef}` when attaching a ref to a `react-bulma-components` component.","message":"To pass a React ref to the underlying DOM element rendered by a `react-bulma-components` component, use the `domRef` prop instead of the standard `ref` prop. This is a deliberate design choice to avoid extra wrapper components from `React.forwardRef`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult the official Storybook documentation at `https://react-bulma.dev/en/storybook` for specific component usage examples and prop definitions.","message":"The API and naming conventions for components in `react-bulma-components` may sometimes differ from the official Bulma documentation. Always refer to the library's Storybook for accurate component usage and available props.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully review the Storybook for each component and incrementally update your code. Pay close attention to prop changes and behavior differences.","message":"Version 4.0.0 introduced significant internal and external changes, including new spacing modifiers and improved TypeScript support, which may require adjustments to existing codebases. No official migration guide was provided.","severity":"breaking","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install bulma` or `yarn add bulma`, then add `import 'bulma/css/bulma.min.css';` to your application's entry point (e.g., `index.js` or `App.js`).","cause":"The Bulma CSS framework is a peer dependency and must be installed and imported separately.","error":"Module not found: Can't resolve 'bulma/css/bulma.min.css'"},{"fix":"Ensure you import `Form` and then destructure its properties: `import { Form } from 'react-bulma-components'; const { Input, Field, Control, Label } = Form;`","cause":"Attempting to import Form sub-components (like Input, Field, Control) directly from 'react-bulma-components' instead of destructuring them from the 'Form' export.","error":"TypeError: Cannot read properties of undefined (reading 'Input') (or similar for other Form sub-components)"},{"fix":"Change `ref={myRef}` to `domRef={myRef}` on the `react-bulma-components` component.","cause":"Using the standard `ref` prop on a `react-bulma-components` component, which internally expects `domRef` for passing refs to the actual DOM element.","error":"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"}],"ecosystem":"npm"}