anousss007/ng-blatui

Analysis updated 2026-05-18

★ 11TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((ng-blatui))
    Library contents
      155 UI components
      70 chart types
      34 page templates
    Angular features
      Standalone zoneless
      Signals state
      SSR safe
    Accessibility
      WCAG AA tested
      Angular Aria CDK
    AI support
      MCP server
      llms.txt registry

mindmap root((ng-blatui)) Library contents 155 UI components 70 chart types 34 page templates Angular features Standalone zoneless Signals state SSR safe Accessibility WCAG AA tested Angular Aria CDK AI support MCP server llms.txt registry

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add accessible buttons, forms, tables, and other UI components to an Angular app without building them from scratch

USE CASE 2

Use the 34 ready-made page templates to scaffold a dashboard, pricing page, or e-commerce product page quickly

USE CASE 3

Connect an AI coding assistant like Cursor or Claude to the MCP server for accurate component docs while building

USE CASE 4

Add 70 chart components to an Angular data dashboard without writing chart logic

What is it built with?

TypeScriptAngularTailwind CSSnpmVitest

How does it compare?

	anousss007/ng-blatui	blockedpath/pi-xai-oauth	dzmprt/csharppainkiller
Stars	11	11	11
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	moderate	easy	easy
Complexity	3/5	2/5	3/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Angular 21 or 22 and Tailwind CSS v4, the Tailwind preset must be configured before components render correctly.

Use freely for any purpose including commercial use as long as you keep the copyright notice.

In plain English

ng-blatui is a component library for Angular applications, providing 155 ready-made UI components, 70 chart components, 16 page-section blocks, and 34 full page templates. It is a port of a design system called BlatUI into Angular-specific code. If you are building an Angular web app and need buttons, forms, data tables, charts, or full page layouts, you can install this library and drop the components directly into your project. The library is built for modern Angular (versions 21 and 22) and uses patterns the Angular team currently recommends: standalone components with no need to set up Angular modules, signals for state management, and zoneless change detection which tends to be faster. Every component is also safe for server-side rendering, meaning it works in apps that pre-render pages on the server before sending them to the browser. A notable aspect is the accessibility focus. Components are built on Angular's official accessibility toolkit and the Angular CDK, and they are tested to meet WCAG AA accessibility standards. Every form control also implements a standard interface so it works with Angular's reactive forms, template-driven forms, and signal-based forms interchangeably. Theming works through CSS variables and Tailwind CSS version 4. You override a set of design tokens to restyle the whole library at once, and light and dark mode are included by default. One unusual feature is support for AI coding assistants. ng-blatui ships with a Model Context Protocol (MCP) server that tools like Cursor, Claude, or VS Code can connect to. This lets AI assistants search and look up component documentation without guessing at names or API signatures. An llms.txt file and a machine-readable registry also give AI tools a reliable catalog of what is available. Installation is a single npm command. The library requires Angular 21 or 22 along with Tailwind CSS 4. Full docs and a live component gallery are available at a linked documentation site. The project is MIT-licensed.

Copy-paste prompts

Prompt 1

I'm building an Angular 22 app with Tailwind CSS v4. How do I install ng-blatui, add the Tailwind preset, and use my first buiButton and buiInput in a standalone component?

Prompt 2

I want to use ng-blatui form components with Angular reactive forms. Show me how the ControlValueAccessor implementation works and how to bind a buiInput to a formControl.

Prompt 3

How do I connect ng-blatui's MCP server to Cursor or Claude so I can look up component docs inline while coding? Walk me through the setup.

Prompt 4

I need dark-mode support in my Angular app using ng-blatui. Show me how to override the oklch CSS tokens and toggle the dark class.

Prompt 5

Show me how ng-blatui's signal-based component API works for a form control using input(), model(), and output() signals.

Frequently asked questions

What is ng-blatui?

A ready-to-use Angular UI library with 155 components, 70 charts, and 34 page templates, built for modern Angular with accessibility and AI-assistant support built in.

What language is ng-blatui written in?

Mainly TypeScript. The stack also includes TypeScript, Angular, Tailwind CSS.

What license does ng-blatui use?

Use freely for any purpose including commercial use as long as you keep the copyright notice.

How hard is ng-blatui to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is ng-blatui for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub anousss007 on gitmyhub

Verify against the repo before relying on details.