A collection of tools and UI components for building Web UIs that work everywhere.
- Easy to use Web Components
- Works in any Framework (Angular, React, Vue...)
- Responsive and Customizable Themes
- Layout, Typography, and Icons Utilites
| Package | Downloads | CI Status | CDN |
|---|---|---|---|
 |
 |
 |
 |
 |
 |
|
 |
 |
 |
|
 |
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
|
 |
 |
|
Documentation
Installation
Blueprint UI components are built as Web Components. This enables them to work in a variety of frameworks and libraries. Blueprint UI is split into several packages that can be used independently. To use components its install the following,
npm install @blueprintui/components
Optional packages for layout and typography utilities are also available.
npm install @blueprintui/layout @blueprintui/typography
CSS
To use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.
@import '@blueprintui/themes/index.min.css';
@import '@blueprintui/themes/dark/index.min.css';
or
<link rel="stylesheet" href="https://github.com/blueprintui/blueprintui/blob/main/@blueprintui/themes/index.min.css">
<link rel="stylesheet" href="https://github.com/blueprintui/blueprintui/blob/main/@blueprintui/themes/dark/index.min.css">
CDN
Blueprint UI Components can be used via CDNs for fast and easy prototyping.
<link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">
<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/dark/index.min.css">
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';
</script>
Using a Component
Once the theme CSS is loaded, components can be imported via JavaScript imports.
import '@blueprintui/components/include/alert.js';
<body bp-theme=" { theme: 'dark' });">
<bp-alert status="success">hello there!</bp-alert>
</body>
Development
Prerequisites
To develop BlueprintUI locally, you will need:
- Node.js: 26.2.0 (managed via nvm)
- pnpm: 11.3.0
- Git LFS: Required for managing screenshot files in visual tests
Setup
The repository includes an automated setup script that installs all dependencies including Git LFS:
pnpm run setup
This will:
- Install nvm and Node.js 26.2.0
- Install pnpm 11.3.0
- Install Git LFS and configure it
- Install all project dependencies
- Install Playwright browsers for testing
If you prefer manual setup, ensure Git LFS is installed before cloning:
# Ubuntu/Debian
curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash
sudo apt-get install git-lfs
git lfs install
# macOS
brew install git-lfs
git lfs install