BSUI

Modern Bootstrap component system for React applications. Build Bootstrap 5 applications with composable React components, utility props, and JSDoc-powered IntelliSense.

Features

• Bootstrap 5 Components
• Validated utility props
• Consistent component API
• Bootstrap-compatible architecture
• No Bootstrap JavaScript dependency
• JSDoc-powered IntelliSense
• Interactive documentation

Installation

Requirements:

• React 19+
• Bootstrap 5.1.3

Install BSUI:

npm i @promethey/bsui

Install Bootstrap:

npm i bootstrap

Import Bootstrap styles in your application entry point:

import "bootstrap/dist/css/bootstrap.min.css";

Usage

import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "@promethey/bsui";

export function Example() {
  return (
    <Button tone="primary" size="lg">
      Hello BSUI
    </Button>
  );
}

Prime-Based Architecture

Every BSUI component is built on top of Prime, the foundation component of the library.

Bootstrap utility props, responsive object syntax, and common styling capabilities are inherited by every BSUI component through the Prime foundation.

<Prime
  d="flex"
  bg={{ color: "primary", opacity: 75 }}
  text={{ color: "light", align: "start" }}
  flex={{ justifyContent: "center", alignItems: "end" }}
  mt={{ xs: 3, md: 0 }}
/>

<Card
  d="flex"
  bg={{ color: "primary", opacity: 75 }}
  text={{ color: "light", align: "start" }}
  flex={{ justifyContent: "center", alignItems: "start" }}
  mt={{ xs: 3, md: 0 }}>
  <Card.Body>
    <Card.Title fw="bolder" mb={1}>
      Card title
    </Card.Title>
    <Card.Text>Some quick example text</Card.Text>
  </Card.Body>
</Card>

Whether working with Card, Button, Navbar, or any other component, the same Prime API is available throughout the library.

As a result, developers learn the Prime API once and use the same patterns consistently throughout the library.

Developer Experience without TypeScript

Build React applications with rich editor support without requiring TypeScript.

BSUI combines JSDoc annotations and PropTypes to provide:

• Autocomplete and IntelliSense
• Inline API documentation
• Development-time type hints
• Runtime prop validation
• No additional TypeScript tooling required

Invalid prop values are detected during development with detailed editor diagnostics.

Why tone?

BSUI uses the tone prop to control the visual appearance of components.

Unlike variant, the name tone is shorter, easier to type, and better reflects the semantic purpose of the prop.

<Alert tone="danger" />
<Button tone="primary" />
<Navbar tone="dark" />

Using a single semantic prop across the component library provides a more consistent and predictable API.

External Libraries

• React Transition Group - animations and transitions
• Embla Carousel - carousel engine
• Floating UI - dropdowns, tooltips, popovers, and positioning

Contributing

Contributions are welcome!

Before opening a pull request, please read the Contributing Guide.

License

MIT © Egor Sedelkov