DEV Community

Cover image for Component library - Pebble UX
huisman-peter
huisman-peter

Posted on

Component library - Pebble UX

#webdev #webcomponents #opensource #discuss

To the DEV Community,

I have been working on a passion project for a while now, and this week I finally hit a major milestone: I published the very first stable version to NPM.

It is called Pebble UX — a modern, framework-agnostic component library built entirely on native Web Components.

Why another component library?

We already have great tools out there, but I wanted to build something that strictly focuses on three core pillars:

  1. Truly Native and Lightweight: Built on top of the web platform using standard custom elements. Zero framework overhead. You can use them in vanilla HTML, React, Vue, Angular, or whatever comes next.
  2. Accessible by Default (ARIA): I did not want accessibility to be an afterthought. Semantic markup, proper ARIA attributes, and full keyboard navigation support are baked directly into the components.
  3. The Blazor Bridge: This is a big one. I love the .NET ecosystem, so I built PebbleBlazor. It brings these exact same components to Blazor with strongly-typed C# wrappers and native two-way data binding (@bind-value) out of the box. No heavy, unmaintained JS-interop layers required.

What is inside the box?

Pebble UX ships with everything from basic foundational pieces to complex UI structures, all fully themeable via a unified Design Token system with native light and dark mode out of the box:

  • Basics: Buttons, Accordions, Avatars, Cards, Tabs.
  • Rich Inputs: Color Pickers with alpha channels, Date and Phone Inputs with built-in validation.
  • Advanced Layouts and Utilities: Responsive Data Tables with sorting and filtering, Splitters, and guided multi-step Wizards.

I need your brutally honest feedback

As a solo maintainer releasing a v1, I know there is always room for improvement. I would love for the frontend and .NET developers here to take a quick look at the library.

Specifically, I would love your thoughts on:

  1. The Component APIs: Do the HTML attributes and properties feel intuitive to you?
  2. The Documentation: Is it easy to navigate? (Note: I am currently working on adding more inline, interactive live playgrounds so you can tweak the code right on the component pages).
  3. Missing Ecosystem Pieces: What component or utility do you constantly find yourself needing that is missing from modern web component suites?

Feel free to check out the links, run npm i @pebble-ux/web-components, or just browse the docs.

Looking forward to your comments and suggestions.

Top comments (0)