hub / github.com/blueprintui/blueprintui

github.com/blueprintui/blueprintui @v2.1.10

Chat with this repo

repository ↗ · DeepWiki ↗ · release v2.1.10 ↗ · + Follow

1,831 symbols 4,508 edges 842 files 6 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

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

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';

<link rel="stylesheet" href="https://github.com/blueprintui/blueprintui/raw/v2.1.10/@blueprintui/themes/index.min.css"> 
<link rel="stylesheet" href="https://github.com/blueprintui/blueprintui/raw/v2.1.10/@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>

Extension points exported contracts — how you extend this code

BpTypeElement (Interface)

(no doc) [88 implementers]

packages/components/src/internals/types/index.ts

ElementInternals (Interface)

(no doc)

packages/typewriter/src/global.d.ts

Document (Interface)

(no doc)

packages/grid/src/global.d.ts

ElementInternals (Interface)

(no doc)

packages/crane/src/global.d.ts

HTMLElementTagNameMap (Interface)

(no doc)

packages/icons/src/include.ts

IntrinsicElements (Interface)

(no doc)

examples/react/src/vite-env.d.ts

Document (Interface)

(no doc)

packages/components/src/global.d.ts

KeyGridConfig (Interface)

(no doc)

packages/typewriter/src/internals/controllers/keynav.controller.ts

Core symbols most depended-on inside this repo

elementIsStable

called by 768

packages/test/src/index.ts

getExample

called by 257

docs/src/_includes/utils/index.js

removeFixture

called by 207

packages/test/src/index.ts

createFixture

called by 152

packages/test/src/index.ts

getImport

called by 89

docs/src/_includes/utils/index.js

getAPI

called by 88

docs/src/_includes/utils/index.js

createGridVisualFixture

called by 84

packages/grid/src/test/index.ts

defineElement

called by 78

packages/components/src/internals/utils/define.ts

Shape

Function 697

Method 632

Class 394

Interface 107

Enum 1

Languages

TypeScript100%

Modules by API surface

packages/crane/src/internals/controllers/draggable-list.controller.ts21 symbols

packages/components/src/internals/controllers/type-popover.controller.ts20 symbols

packages/components/src/internals/controllers/interaction-range-selection.controller.ts20 symbols

packages/typewriter/src/internals/controllers/keynav.controller.ts17 symbols

packages/components/src/forms/controllers/type-form-control.controller.ts17 symbols

packages/grid/src/grid/layout.controller.ts16 symbols

packages/grid/src/grid/element.ts16 symbols

packages/grid/src/column/element.examples.js16 symbols

packages/layout/src/grid/grid.examples.js14 symbols

packages/grid/src/detail/element.ts14 symbols

packages/typography/src/index.examples.js13 symbols

packages/components/src/rating/element.ts13 symbols

For agents

$ claude mcp add blueprintui \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact