Enterprise-grade Stencil Web Components for business applications. 127 components covering forms, charts, data tables, layout, dialogs, media viewers, kanban board, and widgets. Works in any HTML page, no framework required.
Live Demo → — interactive component gallery with all 127 components.
127 Web Components built with Stencil.js. They compile to standard Custom Elements, so they run anywhere HTML runs: plain pages, React, Vue, Angular, Svelte, or any framework that renders to the DOM.
Built for the BitCode low-code platform, but fully standalone. No BitCode server or runtime dependency. Drop a <script> tag and start using components.
Framework-agnostic. No build step for consumers. Tree-shakeable.
| Category | Count | Components |
|---|---|---|
| Fields | 35 | text, textarea, small text, password, integer, float, decimal, currency, percent, date, time, datetime, duration, checkbox, toggle, select, radio, multi-checkbox, tags, many2one link, dynamic link, table select, morph, rich text (Tiptap), markdown, HTML editor, code (CodeMirror), JSON, file upload, image upload, signature pad, barcode/QR, color picker, geolocation (Leaflet), rating |
| Charts | 26 | bar, line, pie/donut, area, scatter/bubble, radar, gauge, funnel, heatmap, treemap, sunburst, candlestick/OHLC, boxplot, mixed/combo, sankey, network graph, tree, polar, parallel coordinates, theme river, pictorial bar, custom (raw ECharts), pivot table, KPI card, scorecard, progress |
| DataTable | 3 | data table with server-side pagination/sorting/filtering, filter builder, lookup modal |
| Views | 10 | form, list, kanban, calendar, gantt, tree, map, activity, report, editor |
| Layout | 10 | row, column, section, tabs, tab, sheet, header, separator, button-box, html-block |
| Dialogs | 5 | modal, confirm, quick-entry, wizard, toast |
| Widgets | 19 | badge, copy-to-clipboard, phone, email, URL, progress, status bar, priority, drag handle, domain, sync status, PDF viewer, image viewer, document viewer, YouTube embed, Instagram embed, TikTok embed, video player, audio player |
| Search | 4 | search, filter bar, filter panel, favorites |
| Social | 3 | activity feed, chatter, timeline |
| 3 | print, export, report link | |
| Table | 1 | child table (editable sub-table for forms) |
All 26 charts are powered by Apache ECharts. Pass raw ECharts options to bc-chart-custom for anything not covered by the dedicated chart components.
<!DOCTYPE html><html><head><scripttype="module" src="https://unpkg.com/@bitcode-framework/ui-web-components/dist/bc-components/bc-components.esm.js"></script></head><body><bc-field-stringname="email" label="Email" requiredplaceholder="you@example.com"></bc-field-string><bc-field-selectname="country" label="Country"
options='[{"label":"Indonesia","value":"ID"},{"label":"Japan","value":"JP"}]'></bc-field-select></body></html>npm install @bitcode-framework/ui-web-componentsimport{defineCustomElements}from'@bitcode-framework/ui-web-components/loader';defineCustomElements();Components work with zero config. When you need API integration, auth, or theming, configure once:
import{BcSetup}from'@bitcode-framework/ui-web-components';BcSetup.configure({baseUrl: '/api',auth: {type: 'bearer',token: ()=>localStorage.getItem('jwt')},theme: 'system',locale: 'en'});Config can also be set via meta tags for server-rendered pages:
<metaname="bc-base-url" content="/api"><metaname="bc-auth-token" content="eyJhbG..."><metaname="bc-theme" content="dark"><bc-field-stringname="name" label="Full Name" requiredclearable></bc-field-string><bc-field-integername="age" label="Age" min="0" max="150"></bc-field-integer><bc-field-currencyname="price" label="Price" currency="USD"></bc-field-currency><bc-field-datename="birthday" label="Birthday" format="YYYY-MM-DD"></bc-field-date><bc-field-togglename="active" label="Active"></bc-field-toggle><bc-field-ratingname="score" label="Rating" max="5"></bc-field-rating><bc-field-geoname="location" label="Location" lat="-6.2" lng="106.8"></bc-field-geo><bc-field-selectname="city"
label="City"
data-source="/api/cities"
data-text-field="name"
data-value-field="id"
searchable></bc-field-select><bc-datatablecolumns='[ {"field":"name","header":"Name","sortable":true}, {"field":"email","header":"Email"}, {"field":"status","header":"Status","filterable":true} ]'
data-source="/api/users"
server-sidepaginationpage-size="20"
selectable></bc-datatable><bc-chart-bardata='[{"category":"Q1","revenue":120000},{"category":"Q2","revenue":180000}]'
x-field="category"
y-field="revenue"
title="Quarterly Revenue"
></bc-chart-bar><bc-chart-kpititle="Active Users" value="12483" trend="up" trend-value="12.5%"></bc-chart-kpi><bc-chart-piedata='[{"name":"Desktop","value":60},{"name":"Mobile","value":40}]'
name-field="name"
value-field="value"
></bc-chart-pie>Apply to any element or the body:
<bodydata-bc-theme="dark">Or auto-detect system preference:
BcSetup.configure({theme: 'system'});Components that load data support four strategies, controlled via attributes or BcSetup:
- Local data - pass data directly via attributes (
options,data,columns) - URL endpoint - set
data-source="/api/users"and the component fetches automatically - Event intercept - listen for
bcDataFetchto modify requests before they go out - Custom fetcher - register a function in
BcSetupfor full control over the request/response cycle
- Built-in rules -
required,min,max,minlength,maxlength,pattern,email,url, and more via attributes - Custom JS validators - register named validators via
BcSetup.registerValidator() - Server-side - components send validation requests and display server errors
BcSetup.registerValidator('no-competitor',async(value)=>{if(String(value).endsWith('@competitor.com'))return'Competitor emails not allowed';returnnull;});<bc-field-stringname="email" label="Email" validate="required email no-competitor"></bc-field-string>Four theme modes: light, dark, system (auto-detect OS preference), and custom. All colors use CSS custom properties, so you override at any granularity.
:root {
--bc-primary:#6366f1;
--bc-border-radius:8px;
--bc-font-family:'Inter', sans-serif;
}11 languages built in. Set via BcSetup.configure({ locale: 'ja' }) or the locale attribute on individual components.
| Code | Language |
|---|---|
en | English |
id | Bahasa Indonesia |
ar | Arabic |
de | German |
es | Spanish |
fr | French |
ja | Japanese |
ko | Korean |
pt-BR | Portuguese (Brazil) |
ru | Russian |
zh-CN | Chinese (Simplified) |
Fields can react to changes in other fields. Register rules that run when a field value changes:
BcSetup.reactivity({'customer_type': (value,form)=>{if(value==='company'){form.setRequired('tax_id',true);form.setVisible('company_name',true);}else{form.setRequired('tax_id',false);form.setVisible('company_name',false);}}});When used inside the BitCode Tauri shell, components automatically route CRUD operations to a local SQLite database for models marked mode: "offline". No code changes to the components themselves.
Stencil compiles to standard Custom Elements, so integration is straightforward in any framework.
import{defineCustomElements}from'@bitcode-framework/ui-web-components/loader';defineCustomElements();functionContactForm(){return(<form><bc-field-stringname="name"label="Name"required></bc-field-string><bc-field-stringname="email"label="Email"required></bc-field-string><bc-field-selectname="country"label="Country"options={JSON.stringify([{label: 'Indonesia',value: 'ID'},{label: 'Japan',value: 'JP'}])}></bc-field-select></form>);}import{defineCustomElements}from'@bitcode-framework/ui-web-components/loader';defineCustomElements();// vite.config.js or vue.config.jsexportdefault{compilerOptions: {isCustomElement: (tag)=>tag.startsWith('bc-')}};<template>
<bc-field-stringname="name"label="Name"required></bc-field-string>
<bc-datatable:columns="columns"data-source="/api/users"server-side></bc-datatable>
</template>// app.module.tsimport{CUSTOM_ELEMENTS_SCHEMA,NgModule}from'@angular/core';import{defineCustomElements}from'@bitcode-framework/ui-web-components/loader';defineCustomElements();
@NgModule({schemas: [CUSTOM_ELEMENTS_SCHEMA]})exportclassAppModule{}<!-- contact.component.html --><bc-field-stringname="name" label="Name" required></bc-field-string><bc-field-datename="birthday" label="Birthday"></bc-field-date>| Library | Purpose |
|---|---|
| Stencil.js | Web Component compiler |
| Apache ECharts | Charts (26 chart types) |
| Tiptap | Rich text editor |
| CodeMirror | Code, JSON, HTML, SQL, CSS editors |
| Leaflet | Maps and geolocation |
| FullCalendar | Calendar views |
| markdown-it | Markdown parsing and rendering |
| JsBarcode | Barcode generation |
| qrcode | QR code generation |
| signature_pad | Signature capture |
| SortableJS | Drag-and-drop sorting |
| SheetJS | Excel export/import |
| frappe-gantt | Gantt charts |
| Repo | Description |
|---|---|
| go-json | JSON/JSONC programming language engine |
| go-json-runtimes | Script runtime engines for go-json (Goja, QuickJS, Yaegi, Node.js, Python) |
| ui-web-components | This repository |
| ui-tauri | Tauri 2.0 native shell for desktop and mobile |
Per-component documentation with props, events, methods, and examples lives in the docs/ folder.
| Guide | Description |
|---|---|
| Getting Started | Installation and basic usage |
| BcSetup | Global configuration: auth, headers, base URL, theme, validators |
| Theming | Light, dark, system-detect, and custom themes |
| Data Fetching | 4-level data strategy |
| Validation | 3-level validation system |
| Reactivity | Dependent fields, cascading logic |
| Component Reference | Full component catalog with links to per-component docs |