webbloqs — building blocks for your website.

The web-component design system built by Quatico.
webbloqs are HTML custom elements with global themed CSS. You compose them through a well-designed API — in the frontend framework of your choice, without extra CSS. This page doesn't sell; it shows you the technology we build with.
Back to Technology
Explore webbloqs.io

What is webbloqs?

webbloqs is a web-component design system. A webbloq is a visual pattern with modular styling and isolated markup, built with web-component technology. A compiler translates the standard HTML API into higher abstractions suited for native use in frontend frameworks. This lets you focus on the business logic without worrying about browser quirks or side effects from surrounding styles.

Three characteristics

  • Parameterizable

    A set of properties changes a webbloq's markup or behaviour — configurable without affecting the styling.

  • Styleable

    CSS custom properties modify the visual appearance. You change the look through the global theme.

  • Composable

    Through the standard web-component API you combine webbloqs into more complex components.

What it gives you

  • Consistency across projects

    A global theme keeps the design uniform across different components and projects.

  • One codebase

    The same components run in React, Lit, Vue.js or plain HTML — one codebase for different platforms.

  • Focus on business logic

    Isolated markup and styling take browser quirks and side effects off your plate — you focus on the business logic.

In your framework

  • React · @webbloqs/react
  • Lit
  • Vue.js
  • Plain HTML

Proven, not claimed

The strongest proof: this website is itself built with webbloqs. We use @webbloqs/elements and @webbloqs/react in production — we use our own tools. Explore the catalog and the documentation rather than taking our word for it.

Sounds like the right foundation for your website?

Let's talk about how webbloqs serves your project — open-ended, we look together at what your case really needs.

Discuss your use case
Jan

Prefer a conversation?

Jan — Give us a call, send an email, or tell us what it is about — whatever suits you best.

jan@quatico.com