New in Omlet: Custom Component Properties and Tags 2.0 for more extensibility and customization

Design systems and component libraries are often as unique as the teams who work on them. We’re constantly reminded of this at Omlet as teams come to us with different configurations, challenges, and goals for their design system and UI libraries.

That’s what led us to build our two newest product updates that I’m excited to share with you today: Custom Component Properties and Tags 2.0.

With these two new features, Omlet now helps you to define and track custom usage metrics and automatically apply tags based on different rules and attributes — giving you a more accurate view of how components are being used across your entire organization. 🔍

Ways to use Omlet’s new properties and tags

Here are some ways you can use the new Custom Component Properties and Tags 2.0 — whether you want to do a one-off analysis or create a saved custom chart to track and report on over time.

• Automatically tag and track components based on their category, such as Icons or Pages
• Automatically tag and track components that are, or should be, deprecated
• Discover components that can be added to your component library
• Identify all the components created by a particular product team or user
• Find components that have missing documentation or tests
• Differentiate visual vs. non-visual components

And the list goes on. Let me quickly explain how these features work.

Add custom metadata to components with Custom Component Properties

Omlet has built-in component properties for analysis — like file path, component name, and package name. Now, with the new Custom Component Properties, you can add your own metadata to your components by running a custom script with Omlet's CLI hooks.

For example, you might want to analyze components based on:

• Their owner (using CODEOWNERs)
• Their test and Storybook coverage (hasStories or hasTests)
• Whether they’re visual or non-visual (using HTML elements like <div>, <img />, etc.)

Programmatically tag and filter your component data with Tags 2.0

In parallel with Custom Component Properties, we improved Omlet’s entire tagging experience with Tags 2.0.

Tagging is now in the Components page, and you have more control over what tags you can apply and how.

In this new tagging experience, you can define tags using component properties — whether they’re default properties or the new custom properties you added using the CLI hook.

This means you can:

• View and analyze component usage by any attribute that’s important to you.
• Go beyond folder-based tags and tailor your data filters to more accurately reflect how your repository is set up.
• Set up complex tag rules to add tags automatically, saving you the manual effort of tagging directories or components individually.

Learn more about Tags 2.0 in our documentation here.