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

Develop pratic and more fast with React components.

pnpmnpmyarnbun

pnpm 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

UI for Agents

Built for the AI-assisted workflow

The docs, a Skill and an MCP server give Claude Code, Cursor, Windsurf and any assistant the real props and examples of Bolio UI, so the code it writes matches the library.

Learn more about UI for Agents

LLMs.txt

llms.txt and llms-full.txt follow the LLMs.txt standard. Give the URL to Cursor, Windsurf, ChatGPT or Claude.

Agent Skills

Install the Bolio UI Skill and the assistant learns the setup and the rules of the library.

MCP server

@bolio-ui/mcp gives assistants direct access to component docs, hooks and theme tokens.

AGENTS.md

One command adds the docs links to the AGENTS.md of your project.

DocumentationSkillsMCP serverAGENTS.md

Use the Bolio UI documentation from https://bolio-ui.com/llms.txt

1The assistant opens llms.txt and finds the page of each component.
2It reads the props and the examples before it writes code.
3Give it llms-full.txt when the whole documentation fits its context.

Read the guide

One theme, every component

Set it once. Every component follows.

Theme

typedark

primary#60A5FA

radius10px

fontvar(--font-sans

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

GuideGetting StartedMigrating to v3Page structureContribute

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, Remix, TanStack Start, Waku, RedwoodSDK or Astro by following the introductory guide.

docs/frameworks