Clarity
Clarity is an open-source design system by Broadcom for building enterprise Angular applications with 30+ components and 200+ icons.
Score
60
User Rating
3.0
Free/Trial Support
Supported
Starting Price
--
Last Updated
Sep 29, 2026
Overview
What is Clarity?
Clarity is an open-source design system and Angular component library developed by Broadcom. It provides 30+ UI components, 200+ icons, and WCAG-informed accessibility guidelines to simplify the complexity of enterprise products. Version 18 upgrades to Angular 21, removes the @cds/core dependency, and uses Angular CDK overlays for popovers.
What is Clarity used for?
Top Features
- 30+ UI components
- 200+ icons
- WCAG-informed accessibility guidelines
- Angular 21 support
- Secondary entry points for tree-shakable imports
- Angular CDK overlays for popovers
- Optional @clr/addons package
- Theme builder and Storybook integration
How to use Clarity?
Start by visiting the Clarity website and choosing either the Designing or Developing path. Designers can quickly start with 30+ components and 200+ icons. Developers can install the @clr/angular package via npm and build applications using Angular components. Documentation, Storybook, and GitHub resources are available for guidance.
Alternative Tools
No alternative tools found
Pros & Cons
Pros
- Open source and free to use
- Comprehensive component library
- Strong accessibility focus
- Regular updates and active community
- Reduced bundle sizes in v18
Cons
- Primarily for Angular applications
- Requires Angular knowledge
- Enterprise-focused design may not suit all projects
Use Cases
- Building enterprise Angular applications
- Creating consistent UI across large teams
- Rapid prototyping with pre-built components
- Ensuring accessibility compliance in web apps
Clarity Pricing
Free Plan
No detailed pricing information available
User Reviews
3.0
out of 5
3.0
No reviews yet
Be the first to review this tool!