React UI KitYour development more creative and dynamic with amazing tools for React

Develop pratic and more fast with React components.

yarn add @bolio-ui/core

Play now

Radio mix

Top 100 this week

1:25

3:18

Calories

2.5k

CAL

Start coding

Get started with Bolio UI

Mag+6

¹²

Kristian Watson

Challenges to a match

One theme, every component

Set it once. Every component follows.

Theme

typedark

primary#60A5FA

radius10px

fontInter

Customizablepalette.primaryChange one token and every component follows.

Modern designxs · sm · md · lg · xlResponsive, theme-based style props for building design systems.

Well documented51 / 51Every component has a live playground and a props table.

Fast loadingsideEffects: falseES modules, so your bundle only ships the components you import.

Theming

Apply your own theming decisions.

Colors, typeface and radius all live in one theme object. Start from the default light and dark themes or create your own.

Customize themes →

Neon Windbreaker

Light, waterproof and made for late nights.

$129.00 ~~$180~~ 28% off

import { Themes } from '@bolio-ui/core'const bolio = Themes.createFromDark({
  type: 'bolio'
})
const terminal = Themes.createFromDark({
  type: 'terminal',
  palette: {
    primary: '#15803D',
    secondary: '#0891B2',
    background: '#0B1110'
  },
  layout: {
    radius: '4px'
  },
  font: {
    sans: 'Menlo, Consolas, monospace'
  }
})
const editorial = Themes.createFromDark({
  type: 'editorial',
  palette: {
    primary: '#9F1239',
    secondary: '#FAFAFA'
  },
  layout: {
    radius: '0px'
  },
  font: {
    sans: 'Georgia, "Times New Roman", serif'
  }
})
const groove = Themes.createFromDark({
  type: 'groove',
  palette: {
    primary: '#DB2777',
    secondary: '#F59E0B'
  },
  layout: {
    radius: '24px'
  },
  font: {
    sans: 'ui-rounded, "SF Pro Rounded", system-ui, sans-serif'
  }
})

Documentation

Docs you can copy from.

A guide for every framework, a props table for each component and examples you paste straight into your project.

docs/getting-started

Getting Started

Install Bolio UI, wrap your app with the provider and start using components right away.

yarn add @bolio-ui/core
import { BolioUIProvider } from '@bolio-ui/core'

Components

Build even faster with Bolio UI.

Premade responsive components designed and built by Bolio UI, ready for your next website.

docs/components

Text

Icons

Button

Theme Generator

Your colors, on every component.

Pick a primary and a secondary color. Bolio UI derives the shades it actually uses and previews them in light and dark.

theme-generator

primary#60A5FAsecondary#A78BFA

LighterLightBaseDark

Platforms

Prepared to get started?

Bolio UI is compatible with a wide range platforms. You can begin using it right away with Next.js, Gatsby.js, RedwoodJS, Vite, or Remix by following the introductory guide.

docs/frameworks