Components

# Overview

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.

<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="jane@example.com">

# Examples

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.

• Badges
• Buttons
• Cards
• Inputs
• Radio Button
• Forms