# BEEQ Design System BEEQ is a comprehensive web component library built with Stencil.js that provides a complete set of accessible, customizable UI components. The library delivers framework-agnostic custom elements that work seamlessly with vanilla JavaScript, Angular, React, and Vue applications. It includes over 40 production-ready components ranging from basic elements like buttons and inputs to complex components like dialogs, selects, and data tables. The design system follows a monorepo architecture using NX, with the core package (`@beeq/core`) containing all web components, and framework-specific wrappers (`@beeq/angular`, `@beeq/react`, `@beeq/vue`) providing enhanced integration with popular frameworks. Additionally, `@beeq/tailwindcss` offers an opinionated TailwindCSS preset for consistent styling. All components emit custom events prefixed with `bq` to prevent collisions with standard DOM events and support CSS custom properties for theming. ## Installation Install the core package for vanilla JavaScript or HTML usage. ```bash npm install @beeq/core ``` ```html Click me! ``` ## Button Component The Button component is a fundamental UI element for user interactions, supporting multiple appearances (primary, secondary, link, text), sizes, and variants including loading and icon-only states. ```html Go back Cancel Learn more Processing... Delete Account ``` ## Input Component The Input component provides a flexible text input field with support for various types (text, password, email, number, tel, search, url), validation states, debounced input events, and helper text. ```html Please enter a valid email address ``` ## Select Component The Select component provides a dropdown selection interface with support for single and multiple selection, search filtering, and customizable options with tags display for multi-select. ```html United States United Kingdom Canada Australia Select all that apply JavaScript TypeScript React Vue.js Angular Node.js Low Priority Medium Priority High Priority Critical ``` ## Checkbox Component The Checkbox component allows users to select one or more options, supporting checked, unchecked, and indeterminate states with full form integration. ```html I agree to the Terms and Conditions Subscribe to newsletter Select All Items
I have read and accept the Privacy Policy
Premium features (coming soon) ``` ## Dialog Component The Dialog component displays modal content with customizable headers, footers, and backdrop behavior, supporting programmatic show/hide methods and various events. ```html
Confirm Action

Are you sure you want to proceed with this action? This cannot be undone.

Cancel Delete
Quick Info

This is a non-modal dialog.
Session Expiring

Your session will expire in 5 minutes. Please save your work.

Extend Session
Open Dialog ``` ## Toast Component The Toast component displays brief, auto-dismissing messages for notifications, confirmations, and alerts with configurable duration and placement. ```html Your changes have been saved. File uploaded successfully! Failed to connect to server. Please try again. Your session will expire in 5 minutes. Processing your request... New message received Simple notification ``` ## Tab Group Component The Tab Group component organizes content into tabbed sections with keyboard navigation support, orientation options, and customizable sizing. ```html Overview Features Pricing Coming Soon General Security Notifications Integrations Dashboard Analytics Reports
Overview content here...
``` ## Slider Component The Slider component provides a visual interface for selecting numeric values with support for single values and ranges, tooltips, and value indicators. ```html ``` ## Angular Integration The Angular wrapper provides seamless integration with Angular's two-way data binding using `[(ngModel)]` and reactive forms support. ```typescript // app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BeeQModule } from '@beeq/angular'; @NgModule({ declarations: [AppComponent], imports: [BeeQModule.forRoot(), BrowserModule, FormsModule], bootstrap: [AppComponent], }) export class AppModule {} ``` ```typescript // main.ts - Set icon path import { setBasePath } from '@beeq/core'; setBasePath('/assets/svg/'); ``` ```typescript // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Accept Terms & Conditions `, }) export class AppComponent { termsAccepted = false; priceRange = [20, 80]; email = ''; onTermsChange() { console.log('Terms accepted:', this.termsAccepted); } onPriceChange() { console.log('Price range:', this.priceRange); } onEmailInput(event: CustomEvent) { console.log('Email input:', event.detail.value); } } ``` ```typescript // Standalone component usage import { Component } from '@angular/core'; import { BqButton, BqCard, BqInput } from '@beeq/angular/standalone'; @Component({ selector: 'app-signup', standalone: true, imports: [BqButton, BqCard, BqInput], template: ` Subscribe `, }) export class SignupComponent { email = ''; onEmailChange(event: CustomEvent<{ value: string }>) { this.email = event.detail.value; } subscribe() { console.log('Subscribing:', this.email); } } ``` ## React Integration The React wrapper converts web components to native React components with proper event handling and type definitions. ```tsx // App.tsx import React, { useState } from 'react'; import { BqButton, BqInput, BqSelect, BqOption, BqCheckbox } from '@beeq/react'; function App() { const [email, setEmail] = useState(''); const [country, setCountry] = useState(''); const [newsletter, setNewsletter] = useState(false); const handleSubmit = () => { console.log({ email, country, newsletter }); }; return (
setEmail(e.detail.value as string)} onBqClear={() => setEmail('')} > setCountry(e.detail.value as string)} > United States United Kingdom Canada setNewsletter(e.detail.checked)} > Subscribe to newsletter Submit
); } export default App; ``` ```typescript // main.tsx - Configure icons path import { setBasePath } from '@beeq/core/dist/components'; setBasePath('icons/svg'); ``` ## Vue Integration The Vue wrapper provides v-model support and seamless event handling for Vue 3 applications. ```vue ``` ```typescript // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.includes('bq-'), }, }, }), ], }); ``` ## TailwindCSS Preset The BEEQ TailwindCSS preset provides design tokens, typography defaults, and CSS reset for consistent styling. ```javascript // tailwind.config.js const beeqPreset = require('@beeq/tailwindcss'); module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], presets: [beeqPreset], }; ``` ```typescript // tailwind.config.ts with typography import plugin from 'tailwindcss/plugin'; import { default as beeqPreset, TYPOGRAPHY_DEFAULT } from '@beeq/tailwindcss'; import type { Config } from 'tailwindcss'; export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], presets: [beeqPreset], plugins: [ plugin(function ({ addBase }) { addBase({ ...TYPOGRAPHY_DEFAULT }); }), ], } satisfies Config; ``` ```css /* main.css - Add fonts and Tailwind directives */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;600;700&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; ``` ## CSS Custom Properties Theming All components support extensive CSS custom property customization for theming and styling adjustments. ```css /* Custom theme overrides */ :root { /* Button customization */ --bq-button--border-radius: var(--bq-radius--m); --bq-button--medium-paddingX: 1.5rem; --bq-button--medium-paddingY: 0.75rem; /* Input customization */ --bq-input--background-color: #f8fafc; --bq-input--border-color: #e2e8f0; --bq-input--border-color-focus: #3b82f6; --bq-input--border-radius: var(--bq-radius--s); /* Dialog customization */ --bq-dialog--background: #ffffff; --bq-dialog--box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --bq-dialog--border-radius: var(--bq-radius--l); /* Toast customization */ --bq-toast--background: #1e293b; --bq-toast--border-radius: var(--bq-radius--m); /* Slider customization */ --bq-slider--progress-color: #3b82f6; --bq-slider--trackarea-color: #e2e8f0; --bq-slider--thumb-size: 20px; } /* Component-specific overrides using ::part() */ bq-button::part(button) { font-weight: 600; text-transform: uppercase; } bq-input::part(input) { font-size: 1rem; } bq-dialog::part(panel) { max-width: 600px; } ``` ## Summary BEEQ Design System provides a production-ready component library that excels in building accessible, responsive web applications across any JavaScript framework. The core library delivers framework-agnostic web components with consistent APIs and comprehensive event systems, while framework-specific wrappers provide native integration patterns like Angular's `[(ngModel)]`, React's event handlers (`onBqClick`, `onBqChange`), and Vue's `v-model` directives. The design system is particularly well-suited for enterprise applications requiring consistent UI patterns, form-heavy interfaces with complex validation requirements, and projects that need to support multiple frontend frameworks from a single component library. Integration typically involves installing the core package plus framework wrapper, configuring icon paths, and importing components as needed. The extensive CSS custom property support enables deep theming customization without modifying component source code.