This is a premium product and it is worth every cent. And here is why.

900+ components with variations, hover/disabled states and examples, covering almost all stable Clarity components. Check out a full list of components further in this article ⬇⬇⬇⬇⬇

with variations, hover/disabled states and examples, covering almost all stable Clarity components. Check out a full list of components further in this article ⬇⬇⬇⬇⬇ Full Clarity color palette and typography sections added with 230+ color and text styles

Templates and examples components included

1 free video call tutorial

Figma styles set up and applied to all components

Built in a clever way

Components are separated into multiple pages and grouped inside each category, to provide the best navigation and best Instance menu experience. Many component and categories use emoji in their names to help you locate them faster.

Focus on your task, rather than on moving pixels

The worst thing in UI prototyping — is when you’re being constantly interrupted by the lack of some building block, component state, reusable template, or by a necessity to measure sizes and spacing while positioning components.

To help you avoid that, I’ve made components very flexible, added many different states and variations of each component, added examples, which will help you to start quickly by re-using prepared templates.

Multicomponents and Constructors

Multicomponent — is a component, that contains a list of similar elements — drop-down items, table rows, calendar days, and so on, all placed with proper margins/paddings. Just place a multicomponent on your design board, customize items through instance menu and by editing text — and you are good to go!

Also, you can detach from multicomponent and keep working with base components if you need to customize it deeper.

Before and After. From Tree View multicomponent to this, just by switching instances and editing text

Constructor — is a set of prepared component’s parts, which you need to customize slightly, put them together and group into a frame. Constructors often contains multicomponents. For example, Datagrid can be assembled by taking background part, adding a few columns parts (which are multicomponents for Datagrid cells), footer part, and grouping everything together into a single frame.

Using the power of Constructor and multicomponent you can save time when creating complex objects

Apply your own improvements

This UI kit is huge, but you will always find something to add for your specific workflows.

Don’t hesitate to add more variations and prepared templates, restructure and rename components as you wish. Do everything that will help you to perform better.

Share your ideas in our Spectrum community.