DEV Community

IKER PEREZ
IKER PEREZ

Posted on

UI IP Toolkit - A standalone static visual catalog for CSS/JS components

UI IP Toolkit - A standalone static visual catalog for CSS/JS components

I built UI IP Toolkit to solve my own workflow problem: I kept losing useful UI snippets (buttons, loaders, CTA blocks, glassmorphic cards, layout grids) across old projects and directories.

Design Philosophy

  • Zero dependencies: Raw HTML, CSS, and vanilla JS. No NPM packages, framework configurations, or build steps required.
  • Copy-paste ready: Visual preview cards with one-click copy buttons for immediate use in any stack.
  • Light/Dark mode: Clean design system focusing on micro-interactions, sleek gradients, and responsive layouts.
  • Visual catalog: Catalog of gradients, buttons, fonts, loading states, hover treatments, glass surfaces, layout fragments, and UI patterns.

How do you manage your personal code/CSS snippet collections? Hope this is useful to others!

Top comments (1)

Collapse
 
sanjay_singh_1 profile image
Sanjay Singh

Your approach of generating a static visual catalog at build time, pulling component metadata directly from your CSS/JS files, makes the UI IP Toolkit both lightweight and instantly browsable. Have you considered cross‑posting this to ZyVOP (zyvop.com) to share it with an even broader community of engineers?