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 | | ------------- | ------------- | --------------| -------------- | | [](https://www.npmjs.com/package/@blueprintui/components) | [](https://www.jsdelivr.com/package/npm/@blueprintui/components) |  | [](https://www.jsdelivr.com/package/npm/@blueprintui/components) | | [](https://www.npmjs.com/package/@blueprintui/icons) | [](https://www.jsdelivr.com/package/npm/@blueprintui/icons) |  | [](https://www.jsdelivr.com/package/npm/@blueprintui/icons) | | [](https://www.npmjs.com/package/@blueprintui/crane) | [](https://www.jsdelivr.com/package/npm/@blueprintui/crane) |  | [](https://www.jsdelivr.com/package/npm/@blueprintui/crane) | | [](https://www.npmjs.com/package/@blueprintui/typewriter) | [](https://www.jsdelivr.com/package/npm/@blueprintui/typewriter) |  | [](https://www.jsdelivr.com/package/npm/@blueprintui/typewriter) | | [](https://www.npmjs.com/package/@blueprintui/layout) | [](https://www.jsdelivr.com/package/npm/@blueprintui/layout) |  | | | [](https://www.npmjs.com/package/@blueprintui/themes) | [](https://www.jsdelivr.com/package/npm/@blueprintui/themes) |  | | | [](https://www.npmjs.com/package/@blueprintui/typography) | [](https://www.jsdelivr.com/package/npm/@blueprintui/typography) |  | | ## Documentation - [Documentation](https://blueprintui.dev) - [JavaScript CDN](https://stackblitz.com/edit/blueprintui-cdn) - [Angular](https://stackblitz.com/edit/blueprintui-angular) - [Vue](https://stackblitz.com/edit/blueprintui-vue) - [React](https://stackblitz.com/edit/blueprintui-react) ## 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, ```shell npm install @blueprintui/components ``` Optional packages for layout and typography utilities are also available. ```shell 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. ```css @import '@blueprintui/themes/index.min.css'; @import '@blueprintui/themes/dark/index.min.css'; ``` or ```html <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. ```html <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. ```javascript import '@blueprintui/components/include/alert.js'; ``` ```html <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: ```bash 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: ```bash # 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 ```