Vanilla JS

reke-ui works directly in any HTML page with no framework required.

With a bundler

<script type="module">
  import 'reke-ui/button';
  import 'reke-ui/input';
</script>

<reke-button variant="primary">Click me</reke-button>
<reke-input label="Email" type="email"></reke-input>

From CDN / node_modules

<link rel="stylesheet" href="node_modules/reke-ui/dist/tokens/reke-tokens.css" />
<script type="module" src="node_modules/reke-ui/dist/reke-ui.js"></script>

<reke-button variant="primary">Click me</reke-button>

Listening to events

All reke-ui events use the standard addEventListener API:

const button = document.querySelector('reke-button');
button.addEventListener('reke-click', () => {
  console.log('Button clicked!');
});

const input = document.querySelector('reke-input');
input.addEventListener('reke-change', (e) => {
  console.log('Value:', e.detail.value);
});

Setting properties

For properties that accept objects or arrays (like reke-table or reke-select), set them via JavaScript:

const select = document.querySelector('reke-select');
select.options = [
  { value: 'js', label: 'JavaScript' },
  { value: 'ts', label: 'TypeScript' },
];