blueprintui

About blueprintui

<h1><img src="https://blueprintui.dev/assets/images/logo-neutral.svg" style="width: 350px" alt="BlueprintUI" /></h1> #### 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 | | ------------- | ------------- | --------------| -------------- | | [![npm version](https://img.shields.io/npm/v/@blueprintui/components?color=%2334D058&label=%40blueprintui%2Fcomponents)](https://www.npmjs.com/package/@blueprintui/components) | [![](https://img.shields.io/npm/dm/@blueprintui/components?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/components) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) | [![](https://img.shields.io/jsdelivr/npm/hm/@blueprintui/components?color=%2334D058)](https://www.jsdelivr.c ...

b

Published by

blueprintui

Visit View Profile

README.md

View on GitHub

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="@blueprintui/themes/index.min.css"> 
<link rel="stylesheet" href="@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