Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Install / Use
/learn @src-zone/MaterialREADME
<a href="https://material.src.zone"><img align="right" src="https://material.src.zone/css/bloxmaterial.4b1fe3a46fecc6299b03.svg" width="100" height="100"/></a>
Blox Material makes it possible to create beautiful Angular apps with modular and customizable UI components, designed according to the Material Design Guidelines. It integrates Material Components for the Web (a Google project) with the Angular framework.
Quick Links
<a href="https://github.com/src-zone/material/actions"><img align="right" src="https://buildstats.info/github/chart/src-zone/material?branch=master&showStats=false" width="231" height="71"/></a>
- Documention, Demo & Examples
- Old Documention, Demo & Examples (for v0.x)
- Changelog
- News (via twitter)
- Guide for upgrading from v0.18.1 to v1.0.0
Roadmap for 2.0.0
- Upgrade to material-components-web 9.0.0
- Implement new components:
banner,circular-progress,data-table,segmented-button,tooltip, andtouch-target - Add angular schematics support to help with installation
- Add component alternatives to directives with complex structure
- Add autocomplete input component
Building from source
If you want to code on the library itself, or build it from source for other reasons, here are some tips:
- Please run an
npm installin the root directory first. The root directory contains git hooks and scripts for releasing/publishing new versions. - The library code is in the directory
bundle. You need to runnpm installthere, before e.g. building (npm run build) or testing (npm run test) the material library. - The demo and documentation website is in the
sitedirectory. Before building, the site, you must have built the materialbundlefirst. - Check the
package.jsonfiles for other commands that can be used to build, debug, test, release, or publish the library. - Publishing a new bundle is handled by Github Actions. The commands for publishing/releasing a new
version are in the root
package.json. These commands create the appropriate tags and changes that are picked up by a Github Action build to do an actual publish/deploy/distribution of a new version of the library. - Please use commit messages according to the Angular Commit Message Guidelines.
Related Skills
Writing Hookify Rules
82.5kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
diffs
335.4kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
mcp-for-beginners
15.6kThis open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable, and secure AI workflows from session setup to service orchestration.
repomix
22.6k📦 Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language Models (LLMs) or other AI tools like Claude, ChatGPT, DeepSeek, Perplexity, Gemini, Gemma, Llama, Grok, and more.
