Quick answers about installing, styling and theming Bolio UI.
Getting started
Run npx @bolio-ui/cli@latest init at the root of your project. It detects the framework, installs @bolio-ui/core and edits the root file. To do it by hand, follow Getting Started.
React 18.2 or later, including React 19. Bolio UI is tested on both.
Next.js, Vite, React Router, Remix, Gatsby, RedwoodJS, TanStack Start, Waku, RedwoodSDK and Astro have a guide and a CLI template. Any other React setup works with the manual steps.
Yes. BolioUIProvider gives every component its theme and CssBaseline sets the base styles of the page. Place both once at the root of your app.
Styles
The stylesheet is missing. Import @bolio-ui/core/styles.css once, anywhere before the components render, such as app/layout or src/main.tsx.
Write a plain CSS rule in your own stylesheet. Component styles live in a CSS @layer below unlayered CSS, so your rule wins without !important or extra specificity. Prefer the documented props and CSS custom properties over internal class names.
Yes. Import @bolio-ui/core/css/* for one stylesheet per component, in place of the combined file.
No. Since v3 the styles ship as static CSS, so there is no runtime injection and no registry for the App Router.
Themes
Change the themeType prop of BolioUIProvider and every component adapts. See Customize Themes.
Create a theme with Themes.createFromLight. Not sure which colors to pick? The Theme Generator previews them on real components and gives you the code.
Yes. Load the font in your app and set it in your theme or in your own CSS. The Fonts section of Customize Themes shows an example.
Components
Most components forward their ref to the main element. See Refs and accessibility for the details.
Yes. Components follow the WAI-ARIA patterns, work with the keyboard and expose roles and states. Controls without visible text need an aria-label, which the guide explains.
Nest Section, Container, Row and Col. The Page structure guide has a live example.
In the separate @bolio-ui/icons package. Browse them at icons.bolio-ui.com.
Migrating
The styled-jsx runtime is gone and styles ship as one CSS file. Read Migrating to v3 for the breaking changes and a checklist.
At v2.bolio-ui.com.
Open an issue on GitHub. To send a fix yourself, read Contribute.