On a Sandy Beach: open-source

Mike's Notes

Sergio Ruiz, AKA " Seruda", has announced that UI Guideline is now open source. UI Guideline standardises the names and descriptions of UI Components by surveying the top Design Systems in use today.

Pipi 9 uses the names and technical properties of UI Guideline v2. components in the Pipi Design System Engine. Thanks for your great work, Seruda.

Once Ajabbi is making good coin, this great open-source effort could be supported. (Ajabbi will provide long-term continuing support to all open-source software that Pipi uses.)

Resources

References

Reference

Repository

Home > Ajabbi Research > Library > Subscriptions > UI Guideline
Home > Handbook >

Last Updated

16/09/2025

UI Guideline is now open source

By: Sergio Ruiz

UI Guideline: 16/09/2025

Sergio Ruiz is the author of UI Guideline.

Hello, team

It’s been a while since my last update, and today I want to share something very important about the future of UI Guideline.

Why we’re changing

For more than 3 years, we’ve been curating and improving UI Guideline. In the beginning, our “lifetime license” model helped us grow. Thanks to those of you who supported us early, UI Guideline became possible.

But as tools like ChatGPT appeared, it became clear that our old model wasn’t sustainable. If we continued that way, we wouldn’t be able to dedicate the time and resources needed to keep UI Guideline alive and growing.

That’s why we’ve decided to evolve: all UI Guideline data will now be open source. This allows us to share our research with the whole community and keep improving with everyone’s contributions.

What this means for lifetime license users

First of all: thank you. Without your trust, UI Guideline wouldn’t be where it is today.

We know you believed in us and supported us with a lifetime license, and we want to make sure you feel valued—not left behind. That’s why you will now be recognized as VIP Users.

Being a VIP User means you’ll have:

Early access to any new features or products we launch.
Exclusive offers and perks reserved only for you.
Unlimited access, forever.
(And more benefits we’re designing together with the next version of UI Guideline).

Even though we are still shaping the details of UI Guideline v3, please know that our priority is to reward and add value to those who trusted us from the beginning.

Thank you again for being part of this journey. We’re excited about what’s coming, and we’ll be sharing more updates in the coming months.

— The UI Guideline Team

The Design System... of top Design Systems

Save a lot of time in researching, defining and creating your UI components by synthesizing all the wisdom of the most popular Design Systems and UI libraries in one place." - UI Guideline

Our researching process

Check out the step-by-step process of extracting and documenting UI components from top systems.

Step 1. Annual Top 20 Systems

Every year, we select the top 20 best Design Systems and UI libraries. This choice is based on several criteria: a survey conducted among hundreds of developers and designers, popularity, the number of components, whether they are up-to-date or not, and, of course, our experience of over 5 years in crafting UI components.

Step 2. Manual Review and Consolidation of Patterns

For each component, we manually reviewed the 20 systems one by one, looking for a repeating pattern. We observed the way they name the component, how they define its props and anatomy, and, above all, the best practices. Finally, we consolidate all this data into a single file. e.g. modal_consolidate.json.

Step 3. Identify a common UI Pattern

Identify a common pattern and synthesize these into a new file that defines the UI component in detail, including props, anatomy, alternative names, among other aspects. In UI Guideline, you'll be able to find the details of each component in one place.

Why? Save hours of time and effort

With UI Guideline, we save you hours of research and definition of your own components. For example, when you need to define or create a Sidebar component from scratch, you will no longer have to review system by system. Here you'll find all the necessary information to define your Sidebar, based on the wisdom of the best systems of the year.

Active item visual representation

60 Unique Components:

Unveiled Through Extensive Research

Explore 60 components analyzed from 20 design systems and UI Library, offering you refined insights and practical design solutions.

Accordion
Alert
Avatar
Badge
Breadcrumbs
Button
Calendar
Card
Carousel
Checkbox
Collapse
Color Picker
Combobox
Date Picker
Divider
Empty State
Error State
File Uploader
Inline Alert
Link
Menu
Modal
Number Input
Pagination
Popover
Progress Bar
Radio
Rating
Search
Select
Sidebar
Skeleton
Slider
Spinner
Stepper
Success State