Show HN: A collection of interface elements (inspiration for designers and devs)

‣ In a nutshell

Hi, I am Stephan and I created this website collecting interface elements across various products (with a focus on B2B and SaaS, especially on desktop).

‣ Why?

For me it was time-consuming researching how other designers solved certain UI problems. Especially when the problems are niche or tricky – like "3D part viewers", "roles and permissions" or complicated filtering. I wanted a quicker way! I now compiled 300+ examples based on 150+ screenshots from 17 products so others don't have to do the same research as I did.

‣ Why (I think) it's cool

- Inspiration within a few clicks across various product types

- The interface elements are shown in isolation → clicking on them reveals the full interface for better context

- Open for contributions so it can grow quickly in content and thus usefulness – I want it to be the "Wikipedia of interface elements"

- Teaser: Once the UI element collection is big, I am planning to launch user flows (onboarding, sign up, 2FA, etc.)

‣ Technology

I am pretty proud of the tech too:

(1) It's built using Astro (https://astro.build/) and TailwindCSS (https://tailwindcss.com/) which I discovered both via HN → It's a static site with almost 0 JS, so loading times and footprint should be pretty good.

(2) I use the design tool Figma as a data editor and database. I explain this here https://twitter.com/st_phan/status/1425138470486519808

(3) I wrote a custom grid algorithm to layout the screenshots so the client doesn't have to compute the layout (I am planning on writing a "making of"-blogpost to explain the details)

(4) I use ethical analytics using Plausible (https://plausible.io/) because nobody wants cookie banners or creepy tracking ...

‣ Thanks for reading, any feedback is welcome.

At first glance I like it! I think it’s a useful tool thanks for sharing.