https://github.com/blueprintui/blueprintui
:blue_book: Accelerate your development with flexible UI components and tools that work everywhere.
https://github.com/blueprintui/blueprintui
components css-framework design-system ui ui-components web-components
Last synced: 13 days ago
JSON representation
:blue_book: Accelerate your development with flexible UI components and tools that work everywhere.
- Host: GitHub
- URL: https://github.com/blueprintui/blueprintui
- Owner: blueprintui
- License: other
- Created: 2015-08-13T19:40:10.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2025-03-29T05:03:29.000Z (29 days ago)
- Last Synced: 2025-04-14T05:13:01.850Z (13 days ago)
- Topics: components, css-framework, design-system, ui, ui-components, web-components
- Language: TypeScript
- Homepage: https://blueprintui.dev
- Size: 45.3 MB
- Stars: 325
- Watchers: 11
- Forks: 44
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
#### 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
```
## CDN
Blueprint UI Components can be used via CDNs for fast and easy prototyping.
```html
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';
```
## Using a Component
Once the theme CSS is loaded, components can be imported via JavaScript imports.
```javascript
import '@blueprintui/components/include/alert.js';
```
```html
hello there!
```