Home

Metria design system

A personal design system in three packages: components, icons and a Tailwind theme. Two sites document them, Geo for the components and Icono for the icons.

Company
Metria
Date
The Geo docs open on the Dropdown component — an open menu with a submenu above the code that produces it.

Metria is the design system behind my side projects. I kept hitting the same problem with them: either they looked like every other project, or they were missing polish and interaction. So I started pulling the pieces I had built into one place to reuse, first only the logic and later the design as well. It began with dropdowns and buttons and grew into modals and accordions.

When Radix primitives came out, I replaced my handmade logic with them. That gave me a high-quality core and let me spend the time on the design instead: corners, button effects and the other details.

Today it is about 31 components and around 50 icons, both still growing, plus a Tailwind theme. I designed the components and icons in collaboration with a friend, and I built them in code, including optimizing the icons and adapting them for JSX. Bloques is built with it, and so was Lapsso.

PreviousBloques documentation platformNextPlanetScale homepage