Getting Started

Welcome to the Bolio UI documentation!

Bolio UI allows you to make beautiful, modern, and fast websites/applications regardless of your design experience, created with React.js.

New project

Create a project with Bolio UI already set up. The command makes the project with the generator of the framework, installs @bolio-ui/core and wraps the app in BolioUIProvider:

pnpm dlx @bolio-ui/cli@latest init my-app -t next

Pick the framework with -t. Without it, the command asks which one you want.

Add -y to skip every question and --icons to also install @bolio-ui/icons. The generators run with npx, so Node needs npm.

Existing project

Run it at the root of a project you already have. It detects Next.js, Vite, React Router, Remix, Gatsby, RedwoodJS, TanStack Start, Waku, RedwoodSDK or Astro, installs @bolio-ui/core with the package manager of your lockfile, and edits the root file of the app:

pnpm dlx @bolio-ui/cli@latest init

If a file does not look the way the command expects, it leaves the file alone and prints the lines to add. Running it again changes nothing. To do the same by hand, follow the next two steps.

Install

Inside your React project directory, install Bolio UI by running any of the following:

pnpm add @bolio-ui/core

Setup

For Bolio UI to work correctly, you need to set up the BolioUIProvider and the CssBaseline at the root of your application.

React

Go to the root of your application and do this:

import * as React from 'react'

// 1. import the styles once, `BolioUIProvider` and `CssBaseline`
import '@bolio-ui/core/styles.css'
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <BolioUIProvider>
      <CssBaseline />
      <Component />
    </BolioUIProvider>
  )
}

Next.js

Add this to the root of your app. Use the file of the router you have: pages/_app (create it if it doesn't exist) or app/layout.

// 1. import the styles once, `BolioUIProvider` and `CssBaseline`
import '@bolio-ui/core/styles.css'
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <BolioUIProvider>
      <CssBaseline />
      <Component {...pageProps} />
    </BolioUIProvider>
  )
}

export default MyApp

Neither router needs a custom _document or a styles registry: the CSS ships as a plain stylesheet, not injected at render time.

For more information about Next.js + Bolio UI check out the documentation.

Using Bolio UI components

Once Bolio UI is installed you can use any of the components as follows. Bolio UI uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.

import { Button } from '@bolio-ui/core'

const Component = () => <Button>Click me</Button>

APIs

Community

We're excited to see the community adopt Bolio UI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

• • Instagram
• • GitHub

Contributing

PR's on Bolio UI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.