UI Components
Chameleon components, each tile wearing a different brand
Press me
Introducing Chameleon
👋 Hi, we're Materia, and today we're shipping Chameleon, our new Material 3 Expressive web components library, for web, React, Blazor and soon Angular, Vue and Svelte. Honestly, we're absurdly excited.
Component libraries should blend in like chameleons, so we ship with easy but sophisticated theming, and enterprise features including an accessibility focus, handling the data your server wants and presenting locale-specific formats.
Chameleon has two license tiers. Community grants access to a subset of components that you can use commercially for free, and forever. Pro is the paid tier granting fully commercial access to all components, and all future components. Today we're starting a four month pre-release period during which Community waits seven days before watermarking unlicensed components and 28 days before disabling them, allowing you to experiment broadly without needing to pay. From February 2027 Community reverts to its long-term ongoing faster watermarking pace, but remains free forever. Both tiers are for whichever framework or set of frameworks you want.
During pre-release we're offering deep discounts on the Pro tier 🥳.
Pro, off your first year, by the month you buy
The earlier you buy, the more you save. The discount holds for your whole first year.
Why a pre-release period?
Because we are genuinely finishing work on both the Chameleon product, and this website and its tooling, but more specifically:
- It's an obvious marketing trick where we get you to want our shiny new components, justifying this with "Ooh! Report bugs!".
- Ooh! Report bugs! Actually true, please report here.
- We're finishing development on components that missed the pre-release deadline, such as date and time fields, the data grid, the chat interface, and the color picker.
- We're improving website and MCP server documentation.
- Please use this period to tell us where you think our API needs improvement before it's set in stone for version 27.0.0.
Yet another UI library?
Good question, glad you asked. You can choose from plenty of strong competitors to Chameleon, but we rejected them for our other businesses on functionality and theming. Chameleon is for you if you share this dissatisfaction. Competition is good in any marketplace and we're going to compete hard for your attention and trust.
- Chameleon implements and extends Material 3 Expressive, bringing the benefits of Google's astonishing focus on usability and design.
- We implemented CSS corner shape, on all browsers irrespective of native support, giving you the visual delight of squircles, bevels, scoops etc.
- We're shipping today for Web/JS, React and Blazor, and have built and are testing Angular, Vue and Svelte implementations. Every framework gets the same components, properties and behavior, so you always get the same result, everywhere.
- You can build a new color theme with a simple function call either from within your app or your build process. You put one color or one picture in and get light, dark and system CSS themes out.
- Chameleon is gentle on your back end with quick-fire update components like search fields, autocompletes, sliders and dials throttling, debouncing or adaptively pacing to your server's performance capability.
- We have 58 components launching today, rising to 82 by the end of pre-release, so Chameleon is a complete UI library from day one.
- We have built Chameleon to be WCAG compliant, follow WAI-ARIA authoring practices, allow full keyboard navigation and respect reduced motion and high contrast preferences. But of course we're going to have made mistakes and so our commitment is that accessibility is a job that never ends, and we can and will always do better.
- This website obviously dog foods Chameleon, and as we improve it over the coming months you'll see the range of what you can do with Chameleon, right here. Our docs pages have extensive and fast REPLs in the examples sections.
We are a fork of Google's amazing material-web from 2024, but dramatically re-engineered and extended. We have jumped from that library's Material 3 You implementation to Google's 2025 Material 3 Expressive design language.
Who are we?
Materia Technologies has a six years' commitment to Material having built Material.Blazor, wrapping and extending Google's Material 2 JS library in Blazor for our founders' enterprise HealthTech and FinTech platforms. The two used Material.Blazor since 2020 for their SaaS apps Optimi$er and Vectis, both of which are now using Chameleon and are in the process of cutting over entirely. We built our own UI libraries because we found that other offerings couldn't handle our challenging event based data environments and failed to theme well enough.
Chameleon is the next logical step, commercializing the knowledge we've gained but with a totally new implementation with much broader coverage than Material.Blazor's inward focused OSS objective.