{"id":14990134,"url":"https://github.com/blueprintui/blueprintui","last_synced_at":"2026-01-05T07:04:50.083Z","repository":{"id":36373503,"uuid":"40678349","full_name":"blueprintui/blueprintui","owner":"blueprintui","description":":blue_book: Accelerate your development with flexible UI components and tools that work everywhere.","archived":false,"fork":false,"pushed_at":"2025-03-29T05:03:29.000Z","size":47496,"stargazers_count":325,"open_issues_count":6,"forks_count":44,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-14T05:13:01.850Z","etag":null,"topics":["components","css-framework","design-system","ui","ui-components","web-components"],"latest_commit_sha":null,"homepage":"https://blueprintui.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blueprintui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-13T19:40:10.000Z","updated_at":"2025-04-10T16:49:29.000Z","dependencies_parsed_at":"2023-11-13T06:31:35.318Z","dependency_job_id":"62c1ca69-3031-4e8b-a45a-29010d04b76c","html_url":"https://github.com/blueprintui/blueprintui","commit_stats":{"total_commits":490,"total_committers":12,"mean_commits":"40.833333333333336","dds":"0.19183673469387752","last_synced_commit":"f5ef5e292b9a2e8ef20caf1a05939ae59971f993"},"previous_names":["coryrylan/blueprint-css","splintercode/core-flex-grid"],"tags_count":107,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueprintui%2Fblueprintui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueprintui%2Fblueprintui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueprintui%2Fblueprintui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueprintui%2Fblueprintui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blueprintui","download_url":"https://codeload.github.com/blueprintui/blueprintui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824692,"owners_count":21167345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css-framework","design-system","ui","ui-components","web-components"],"created_at":"2024-09-24T14:19:33.685Z","updated_at":"2026-01-01T23:34:26.834Z","avatar_url":"https://github.com/blueprintui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\u003cimg src=\"https://blueprintui.dev/assets/images/logo-neutral.svg\" style=\"width: 350px\" alt=\"BlueprintUI\" /\u003e\u003c/h1\u003e\n\n#### A collection of tools and UI components for building Web UIs that work everywhere.\n\n- Easy to use Web Components\n- Works in any Framework (Angular, React, Vue...)\n- Responsive and Customizable Themes\n- Layout, Typography, and Icons Utilites\n\n\n| Package       | Downloads     | CI Status     | CDN            |\n| ------------- | ------------- | --------------| -------------- |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/components?color=%2334D058\u0026label=%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.com/package/npm/@blueprintui/components) |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/icons?color=%2334D058\u0026label=%40blueprintui%2Ficons)](https://www.npmjs.com/package/@blueprintui/icons) | [![](https://img.shields.io/npm/dm/@blueprintui/icons?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/icons) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) | [![](https://img.shields.io/jsdelivr/npm/hm/@blueprintui/icons?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/icons) |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/crane?color=%2334D058\u0026label=%40blueprintui%2Fcrane)](https://www.npmjs.com/package/@blueprintui/crane) | [![](https://img.shields.io/npm/dm/@blueprintui/crane?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/crane) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) | [![](https://img.shields.io/jsdelivr/npm/hm/@blueprintui/crane?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/crane) |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/typewriter?color=%2334D058\u0026label=%40blueprintui%2Ftypewriter)](https://www.npmjs.com/package/@blueprintui/typewriter) | [![](https://img.shields.io/npm/dm/@blueprintui/typewriter?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/typewriter) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) | [![](https://img.shields.io/jsdelivr/npm/hm/@blueprintui/typewriter?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/typewriter) |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/layout?color=%2334D058\u0026label=%40blueprintui%2Flayout)](https://www.npmjs.com/package/@blueprintui/layout) | [![](https://img.shields.io/npm/dm/@blueprintui/layout?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/layout) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) |  |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/themes?color=%2334D058\u0026label=%40blueprintui%2Fthemes)](https://www.npmjs.com/package/@blueprintui/themes) | [![](https://img.shields.io/npm/dm/@blueprintui/themes?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/themes) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) |  |\n| [![npm version](https://img.shields.io/npm/v/@blueprintui/typography?color=%2334D058\u0026label=%40blueprintui%2Ftypography)](https://www.npmjs.com/package/@blueprintui/typography) | [![](https://img.shields.io/npm/dm/@blueprintui/typography?color=%2334D058)](https://www.jsdelivr.com/package/npm/@blueprintui/typography) | ![Build](https://github.com/blueprintui/blueprintui/actions/workflows/release.yml/badge.svg) |  |\n\n## Documentation\n\n- [Documentation](https://blueprintui.dev)\n- [JavaScript CDN](https://stackblitz.com/edit/blueprintui-cdn)\n- [Angular](https://stackblitz.com/edit/blueprintui-angular)\n- [Vue](https://stackblitz.com/edit/blueprintui-vue)\n- [React](https://stackblitz.com/edit/blueprintui-react)\n\n\n## Installation\n\nBlueprint 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,\n\n```shell\nnpm install @blueprintui/components\n```\n\nOptional packages for layout and typography utilities are also available.\n\n```shell\nnpm install @blueprintui/layout @blueprintui/typography\n```\n\n## CSS\n\nTo use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.\n\n```css\n@import '@blueprintui/themes/index.min.css';\n@import '@blueprintui/themes/dark/index.min.css';\n```\n\nor\n\n```html\n\u003clink rel=\"stylesheet\" href=\"@blueprintui/themes/index.min.css\"\u003e \n\u003clink rel=\"stylesheet\" href=\"@blueprintui/themes/dark/index.min.css\"\u003e \n```\n\n## CDN\n\nBlueprint UI Components can be used via CDNs for fast and easy prototyping.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@blueprintui/themes/index.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@@blueprintui/themes/dark/index.min.css\"\u003e\n\n\u003cscript type=\"module\"\u003e\n  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';\n\u003c/script\u003e\n```\n\n## Using a Component\n\nOnce the theme CSS is loaded, components can be imported via JavaScript imports.\n\n```javascript\nimport '@blueprintui/components/include/alert.js';\n```\n\n```html\n\u003cbody bp-theme=\" { theme: 'dark' });\"\u003e\n\n  \u003cbp-alert status=\"success\"\u003ehello there!\u003c/bp-alert\u003e\n\n\u003c/body\u003e\n```\n\n## Development\n\n### Prerequisites\n\nTo develop BlueprintUI locally, you will need:\n\n- **Node.js**: 24.11.1 (managed via nvm)\n- **pnpm**: 10.18.2\n- **Git LFS**: Required for managing screenshot files in visual tests\n\n### Setup\n\nThe repository includes an automated setup script that installs all dependencies including Git LFS:\n\n```bash\npnpm run setup\n```\n\nThis will:\n- Install nvm and Node.js 24.11.1\n- Install pnpm 10.18.2\n- Install Git LFS and configure it\n- Install all project dependencies\n- Install Playwright browsers for testing\n\nIf you prefer manual setup, ensure Git LFS is installed before cloning:\n\n```bash\n# Ubuntu/Debian\ncurl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash\nsudo apt-get install git-lfs\ngit lfs install\n\n# macOS\nbrew install git-lfs\ngit lfs install\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueprintui%2Fblueprintui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblueprintui%2Fblueprintui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueprintui%2Fblueprintui/lists"}