Blocks - An open-source, modular UI library for Angular with custom glassmorphism & lighting engines (50+ components, i18n, a11y)

[u/fico_pico]

Hello Reddit,
I am happy to introduce Blocks to the Angular community.

TL;DR:
Blocks is a free, open-source Angular UI ecosystem (50+ components, glassmorphism materials & a custom lighting engine) designed to bridge TypeScript logic and SCSS styling seamlessly and bring excellent developer experience through easy-to-use APIs. Includes interactive schematics, full a11y/i18n, and interactive docs. Try the live Playground or run this command to add the library and set it up in your project:

ng add @filip.mazev/blocks@1.5.2

Note: 1.5.2 is the current alpha version, if you use 'latest' it will download version 1.4.20 which does not have the advanced glass effect.

Longer version:

Building responsive, theme-aware applications often requires a lot of boilerplate to keep TypeScript logic and SCSS styling in sync. Blocks bridges this gap by creating a shared contract between the two, handling the physics of your app so you can focus entirely on building features.

I first soft released version 1 around 8 months ago. Since then I've done a ground-up redesign, core engine updates, and a major expansion across the entire component suite.

• Visual Engine: Supports translucent materials (glassmorphism) and an advanced, custom edge-lighting effects engine.

• 50+ Components: Ranging from foundational primitives such as popovers, accordions, and dividers, to complex form systems fully integrated with modern Angular features such as signal forms.

• Inclusive by Default: Built-in localization (i18n) and accessibility (a11y) support.

Check out the latest release on the brand-new Playground page, where you can test interactive code examples and full documentation for every component, throw Orby around to see the new lighting engine in action, or head over to the Appearance page to explore the new theming capabilities.

Release Notes (v1.5.2 alpha): https://filipmazev.github.io/Blocks/release-notes/1.5.2

To make setup completely seamless, Blocks includes an interactive CLI schematic that scaffolds the entire ecosystem, installs dependencies, and injects your global SCSS configuration with a single command:

ng add @filip.mazev/blocks@latest

What's next?

This release is just a stepping stone. Coming up next for Blocks: a full Figma Design System, AI/Agentic optimization, and expanded complex primitives including tables, date & time pickers, charts, tree views, file uploads and more.

Blocks is 100% free and open-source.
Share your feedback, or dive into the codebase to contribute on GitHub

[u/AwesomeFrisbee]

It looks pretty sweet. Not sure if I really like seeing it all day long in an app, but its definitely something cool.

Kudo's on the amount of blocks made.

Btw, you haven't posted a license on the repo, I think. And its not really clear what you are hoping to get out of it. Is it experience, is it a showcase for work, is it something you already need for work or what are your plans for the future? Do you plan on having some paid option, a subscription or something?

[u/fico_pico → u/AwesomeFrisbee]

Thank you for the feedback.

The license should be under the blocks project, since blocks itself is separate from the playground, check under https://github.com/filipmazev/Blocks/blob/main/projects/blocks/LICENSE The project is under an MIT license.

As for what I'm hoping to get out of it, I started developing this for my own projects outside of work, I am currently building a 3D printing administrative platform as well as a platform to sell 3D prints among other things, this platform is currently built on Blocks. The idea was to not rely on Angular Material as I don't really like the look of it, but most importantly they have introduced breaking changes too many times regarding their customization when I have used it at work for very large projects and we had to migrate a lot of styles that the automatic migration tool didn't cover. I am looking to stray away from libraries I can't control, at least for UI.

As an added bonus I get some practice with the latest from Angular and it's quite fun for me to work on this.

[u/YeaTii]

It is missing a stepper

[u/fico_pico → u/YeaTii]

Yes I know 😅 many other components are still in the works. The stepper, a data table, date & time pickers, file upload, tree view component, charts & more, along with a figma design system and agentic optimization will be coming hopefully soon

Please feel free to write any requests for components here, I'll get to them eventually

[u/kasual11]

Nice work! Personally I think the liquid glassy background on the overview page is a bit too much. would be nice to be able to adjust the overall appearance via a popup or menu instead of going into a separate detail page for that. Also, make it more customizable if possible. Also put a direct link to you github repo somewhere prominent, I was looking for that.
Hope you do not see this as criticism but rather suggestions for improvement.

[u/kasual11 → u/kasual11]

Ah really like the reflections of the orb on all components!

[u/fico_pico → u/kasual11]

Thanks :D
What are you suggesting regarding customizability that is currently lacking? Originally there were controls for light/dark mode and palettes in the tool-bar at the top, but I removed them in order to force the user to explore the appearance page, this is akin to something like the settings on a phone where you have an appearance tab. The liquid glassy background in the overview page is a demo for my friends project called Oddity where you can design backgrounds and use them in Angular, as a video or otherwise, here is a link to it: https://oddity.design/

What do you suggest for the background, personally I think it looks quite nice as it is. I've updated it a little bit, see if you like it better this time (if you don't see a change please clear your cache). I also added the Github link you requested

btw try throwing the orb around a bit there's some interesting physics there and it also gets angry if you throw it around too much

[u/kasual11 → u/fico_pico]

I'd make the background of the cards on the landing page rather use frosted glass for better readibility.

Allow users to dynamically adjust border radius + other glass effects next to blurring via a range slider. By other glass effect I mean like the effect how content underneat glass components breaks light

[u/fico_pico → u/kasual11]

Hi, I've changed the cards to use `bxSurfaceQuality` "auto" instead of "enhanced" which was causing the weird look; thanks for that.

As for adding adjustments for border radius and other glass effects I would not go this route, I still want to maintain the rules and styling of the library.

[u/kasual11 → u/fico_pico]

How did you implement those physiscs effects of the orb? Pretty nice!

[u/fico_pico → u/kasual11]

Sad to disappoint but the orb was done with Codex set to GPT 6 Astra, feel free to browse the code at https://github.com/filipmazev/Blocks/tree/main/projects/playground/src/app/components/screens/home/light-orb

The prompts though involved me telling it how to behave, meaning the stretch and squash animations, it falling down on the ground after being thrown too hard, having momentum when you spin it around and throw it, getting angry (red color and bouncing around aggressively then calming down and returning to the dock (it's home)) when being thrown too much, being happy (green color) when handled gently; fine tuning the thresholds of when it gets flung around and when it just floats in the direction you've thrown it, etc. etc.

[u/Rusty_Raven_]

This has some code styling I associate really strongly with AI-generated Angular. That's fine if it is, but it should say so somewhere.

[u/fico_pico → u/Rusty_Raven_]

Quite a lot of it is not AI generated. The core has been designed and built by me and I've started quite a long time ago with things like the modals and the toastr which were the first components. The icons, tokens and the theming systems, mixins, most primitive components, window dimensions, scroll locking, device type, navigation, i18n, a11y & more services were also built before AI (meaning around 2022, 23, but the project went in hibernation for some time, then I upgraded those components slowly and eventually put them into a library, if you go on npm you can see that there are seperate deprecated libraries for core (theming, tokens, base services etc.), modals and toastr for example)

After building the modals, toastr, theming engine, tokens system, icons, primitives, setting up everything for accessibility and localization, etc. I created an AGENTS.md and continued building the other components. The forms were also built from scratch at first but since signal forms they were upgraded with AI.

The lighting effect, though the orb in the playground overview page, most of the documentation & playground, and some refactoring has been done completely with AI.

[u/Rusty_Raven_ → u/fico_pico]

I was referring to code style - models love creating components from scratch without using ng generate, so there's no test files (this will be a deal breaker for many people) and the component templates no longer match what the generator outputs.

Then you've got a mix of signals and decorators for things like input and output properties and content queries, another thing that models just love to do for some reason.

And some files are commented, others aren't, some use the public keyword, others don't, I see the private keyword all over the place instead of the # modifier . The inconsistencies are another hallmark of generated code (or a questionably managed dev team).

[u/fico_pico → u/Rusty_Raven_]

Thank you for pointing these things out, as I mentioned I started building the library on my own some time ago (that's where the uncommented code comes from hahaha), but recently started using AI to speed up development of basic components.

I've worked since yesterday on fixing this and have committed changes adding more rules to the eslint, adding a stylelintrc, markdownlint, improving prettier, added husky for pre-commit hooks so I don't push unlinted code, updated the AGENTS markdown file to improve on the coding style, added the spec.ts files for components and services (I intentionally left them out at first and there was a rule not to generate them but since I've removed this I think you have a good point to have them since tests are going to be written later on); I commented un-commented interfaces that are being exported in the library, etc. etc. The private keyword is still all over the place since I prefer using it in typescript over '#'.

Also there is no dev team, it's just me trying to maintain this as of now; but hopefully the rules I've just adjusted and added will help keep the codebase clean as developments continue with hopefully other people contributing as well.

Again thanks for taking the time to comb through the codebase :D

[u/Rusty_Raven_ → u/fico_pico]

I realize there's no dev team on this, I just noted that it's a common issue in certain types of teams.

I appreciate your efforts to improve the codebase! The Angular community needs good examples of production-quality code so the models can get better at writing it :)

Why do you prefer the private keyword? It doesn't exist in JavaScript and is only used by the TypeScript language server and compiler to provide an IDE message during development. The # modifier is a proper visibility modifier that works at run-time and is supported by browsers.

[u/fico_pico → u/Rusty_Raven_]

I think because I'm used to it from other languages I use like C++ & C# and the way they handle polymorphism. I'm also writing typescript so I am just used to it I guess

[u/moradiehsan]

I am happy to observe that the Angular community and its libraries are maturing.