About Clarity Design System
Overview
Clarity is an open-source design system built for enterprise products. It combines design guidance, reusable Angular components, CSS tokens, and iconography so teams can ship consistent applications. VMware released the project to the community, and it remains freely available through GitHub.
The system targets both designers and developers. Designers start with 30+ components and 200+ icons, while developers build with stable Angular components that follow WCAG-informed accessibility guidelines.
Key Benefits
- Design faster with 30+ prebuilt components and 200+ icons
- Ship accessible applications guided by WCAG-informed accessibility guidelines
- Keep bundles lean with secondary entry points and tree-shakable imports
- Simplify installation by shipping icons, CSS tokens, and layout utilities directly in @clr/angular and @clr/ui
- Customize look and feel through the Theme Builder and CSS design tokens
- Extend the core library with the optional @clr/addons package for extra utilities such as datagrid filters
How It Works
Designers import the component and icon library into their design workflow, then developers install @clr/angular and @clr/ui to use the same components in Angular applications. Teams apply the Theme Builder and CSS tokens to customize styling, follow the accessibility guidelines to keep products inclusive, and reference the Storybook documentation while building. Version 18 removes the @cds/core dependency and upgrades to Angular 21.
Use Cases
- Designers rapidly prototype enterprise interfaces using 30+ components and 200+ icons
- Angular developers build stable production applications with framework-native components
- Accessibility specialists apply WCAG-informed guidelines to keep products inclusive and usable
- Product teams standardize visual style across applications using CSS tokens and the Theme Builder
- Teams keep codebases maintainable with tree-shakable imports and the optional addons package
Why Choose This Product
Clarity is open source and community-driven, with its code, documentation, and priority list published on GitHub. Its direct integration with Angular and the recent removal of the external @cds/core dependency make it a focused choice for teams building enterprise software on the Angular stack.
Key Features
Angular Components
Build enterprise applications with stable Angular components, upgraded to Angular 21 in version 18.
Design Assets
Access 30+ components and 200+ icons to speed up design and development work.
Accessibility Guidelines
Follow WCAG-informed guidelines to keep applications inclusive and usable for all.
Theme Builder
Customize themes and design tokens through the Theme Builder addon.
Tree-shakable Imports
Use secondary entry points for all modules to import only what you need and reduce bundle size.
CSS Tokens
Style applications with CSS tokens, icons, and layout utilities shipped directly in @clr/ui and @clr/angular.
Advanced Datagrid
Handle complex data tables with the Datagrid component, including unsort capability and simplified selection logic.
Storybook Docs
Explore and document components through the Storybook integration.
Clarity Design System Pricing
Pricing extracted from the product website and may change. Check the source for current details.