Qariyb Elements
Qariyb Elements is a set of prebuilt UI components for building your event registration flow. It's available as a feature of Qariyb.js, our foundational JavaScript library for event ticketing.
Why Qariyb Elements?
- Drop-in Components - Add event registration to any website with a single line of code
- Fully Customizable - Match your brand with our Appearance API for themes, variables, and CSS rules
- Framework Agnostic - Works with React, Vue, Angular, or vanilla HTML
- Secure by Default - PCI-compliant payments via Stripe. Sensitive data never touches your servers
- Accessible - WCAG 2.1 compliant with full keyboard navigation and screen reader support
- Localized - Every user-facing string is overridable through
labels
Available Elements
| Element | Tag | Description |
|---|---|---|
| Checkout Element | <qariyb-checkout> | Complete registration flow with tickets, details, and payment |
| Tickets Element | <qariyb-tickets> | Standalone ticket selector for custom checkout flows |
| Button Element | <qariyb-button> | Call-to-action that opens checkout in a modal overlay |
| Event Card Element | <qariyb-event-card> | Event display card with image, details, and registration |
| Event List Element | <qariyb-event-list> | Grid or list view of events for an organization |
Quick Start
Add Qariyb Elements to your page in three steps:
<!-- 1. Configure — publishableKey is required, everything else is optional -->
<script>
window.QariybConfig = {
publishableKey: 'pk_live_...',
theme: 'light',
};
</script>
<!-- 2. Load Qariyb.js -->
<script src="https://js.qariyb.com/v1/qariyb.js"></script>
<!-- 3. Add an Element -->
<qariyb-checkout event-id="01HWXYZ123ABC456"></qariyb-checkout>
publishableKey is what authenticates every request an Element makes — the SDK
sends it as the X-Widget-Key header. Leave it out and no header is sent at
all, so every call fails with 401 (600, "No API key provided") and the
Element renders empty. Find your pk_live_ key under
API keys.
window.QariybConfig is a single object, so set it once, before the SDK
script. The theming and labels examples elsewhere in these docs show the whole
assignment: keep your publishableKey in it rather than replacing it.
Or install via npm:
npm install @qariyb/js
import '@qariyb/js';
Appearance API
Customize the look and feel of Elements to match your brand. The Appearance API provides three layers of control:
1. Theme Presets
Choose from built-in themes for instant styling:
window.QariybConfig = {
publishableKey: 'pk_live_...',
theme: 'dark', // 'light' | 'dark' | 'flat' | 'minimal'
};
2. Variable Overrides
Fine-tune specific design tokens:
window.QariybConfig = {
publishableKey: 'pk_live_...',
theme: 'light',
variables: {
colorPrimary: '#6366f1',
borderRadius: '8px',
fontFamily: 'Inter, system-ui, sans-serif',
},
};
3. Component Rules
Apply CSS-level overrides to specific components:
window.QariybConfig = {
publishableKey: 'pk_live_...',
theme: 'light',
rules: {
'.Button--primary': {
fontWeight: '600',
textTransform: 'uppercase',
},
},
};
Event System
All Elements emit custom events for analytics integration and state management:
// Listen for successful registrations
window.addEventListener('qariyb:checkout:success', (event) => {
const { order, tickets } = event.detail.data;
// Track in your analytics platform
analytics.track('Purchase', {
transaction_id: order.id,
value: order.total / 100,
currency: order.currency,
items: tickets.length,
});
});
Events follow the pattern qariyb:{element}:{action}:
| Event | Description |
|---|---|
qariyb:checkout:success | Registration completed successfully |
qariyb:checkout:error | An error occurred during checkout |
qariyb:checkout:step-changed | User navigated between checkout steps |
qariyb:tickets:quantity-changed | User changed ticket quantity |
qariyb:button:modal-opened | Modal was opened |