Skip to content

getting-started.md

Latest commit

 

History

History
98 lines (70 loc) · 2.11 KB

getting-started.md

File metadata and controls

98 lines (70 loc) · 2.11 KB

Getting Started

Installation

CDN (no build step)

<script type="module" src="https://unpkg.com/@bitcode/components/dist/bc-components/bc-components.esm.js"></script>

NPM

npm install @bitcode/components
import { defineCustomElements } from '@bitcode/components/loader';
defineCustomElements();

Basic Usage

<bc-field-string name="email" label="Email" required placeholder="you@example.com" />
<bc-field-integer name="age" label="Age" min="0" max="150" />
<bc-field-select name="country" label="Country" options='[{"label":"Indonesia","value":"ID"},{"label":"Japan","value":"JP"}]' />

Components work standalone — no framework, no backend, no config needed.

With API Data

BcSetup.configure({
  baseUrl: '/api',
  auth: { type: 'bearer', token: () => localStorage.getItem('jwt') }
});
<bc-field-select name="city" label="City" data-source="/api/cities" searchable />
<bc-datatable columns='[{"field":"name","header":"Name"},{"field":"email","header":"Email"}]' data-source="/api/users" server-side />

Dark Mode

<body data-bc-theme="dark">

Or auto-detect system preference:

BcSetup.configure({ theme: 'system' });

Framework Integration

React

import { defineCustomElements } from '@bitcode/components/loader';
defineCustomElements();

function App() {
  return <bc-field-string name="email" label="Email" required />;
}

Vue

import { defineCustomElements } from '@bitcode/components/loader';
defineCustomElements();

// vue.config.js or vite.config.js
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('bc-');

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Next Steps