Examples of how to build components


Unlike many other CSS frameworks, Elements doesn’t include any component classes like form-input, btn, card, or navbar.

Elements is a CSS framework for implementing the Q-CTRL design system, and does not attempt to force particular patterns as components can look different from one site to another. Providing opinionated component styles that you’d end up wanting to override anyways would only make the development experience more frustrating.

Instead, you’re encouraged to work utility-first and create reuseable HTML and React components when you start to notice common patterns in your UI.

Simple form input component

<input class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="email" placeholder="">


To help you get started, we’ve included a bunch of component examples built with utility classes that might be helpful for inspiration or to understand how to implement common UI elements.