Overview
Accessible, production-ready web components designed and tested by Q2. Browse by category, then learn to style, wrap, and compose them into real experiences.
Tecton components are standard web components — no framework required, no build-time magic. Use them in React, Vue, Angular, or vanilla HTML. They behave like native elements: set attributes, listen for events, compose them together. If you can write HTML, you can use Tecton components.
<!-- vanilla HTML — no framework needed -->
<q2-btn
intent="workflow-primary"
id="transfer-btn"
>Transfer funds</q2-btn>
// listen like any DOM element
document.querySelector('#transfer-btn')
.addEventListener('click', e => {
// handle it
});Building a Tecton extension? Components come bundled with q2-tecton-sdk — nothing extra to install. Working on a standalone web project? Use q2-design-system instead. Same components, same theming, same visual consistency — wherever you're working.
import { connect } from 'q2-tecton-sdk';
await connect(); // registers all components globally
import setupDesignSystem from 'q2-design-system';
await setupDesignSystem();Inputs, selection, and validation building blocks.
Structure and present content and data.
Communicate status and guidance to users.
Charts and meters for at-a-glance insight.
Format, localize, and display numbers, dates, and dynamic values.
Modal and toast components wired to Q2 platform orchestration.
How CSS variables work, theming, dark mode, print, and container queries.
Use Tecton components idiomatically in a React app.
Vue integration, including v-model support.
Recipes for assembling components into full pages, plus design-principle guidance.
Q2's accessibility vision, standards, and why it matters — baked into every component.