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.

Install

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

yarn add @bolio-ui/core

Setup

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

React

Go to the root of your application and do this:

/src/app.js

import * as React from 'react'

// 1. import `BolioUIProvider` component
import { BolioUIProvider } from '@bolio-ui/core'

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

Next.js

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and add this:

// 1. import `BolioUIProvider` component
import { BolioUIProvider } from '@bolio-ui/core'

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

export default MyApp

Go to pages/_document.js or pages/_document.tsx (create if it doesn't exist) and add this:

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CssBaseline } from '@bolio-ui/core'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles])
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

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

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>

Individual components import

import Button from '@bolio-ui/core/button'

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

APIs

BolioUIProvider.Props

Attribute	Type	Accepted values	Description	Default
theme	`BolioUIThemes`	ThemeObject	Optional custom theme, by default Bolio UI applies `light` theme	-
disableBaseline	`boolean`	`true/false`	Bolio UI automatically includes `<CssBaseline/>`	`false`

Edit this page on GitHub

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!

Contributing

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

About Bolio UI

MADE & DESIGNED WITHBY BRUNO ANDRADE