reke-ui
v0.2.1
Published
Web Component library built with Lit 3 — dark & light themes
Maintainers
jrequedevReadme
reke-ui
A Web Component library built with Lit 3. Ships with dark and light themes. Framework-agnostic — works with Vue, React, Angular, Svelte, or vanilla JS.
Components
| Component | Tag | Description |
|-----------|-----|-------------|
| Button | <reke-button> | Buttons with variants: primary, secondary, danger, ghost, outline |
| Input | <reke-input> | Text input with label, helper text, and validation |
| Textarea | <reke-textarea> | Multi-line text input |
| Checkbox | <reke-checkbox> | Checkbox with label |
| Toggle | <reke-toggle> | On/off toggle switch |
| Select | <reke-select> | Dropdown select |
| Date Range | <reke-date-range> | Date range picker with presets |
| File Upload | <reke-file-upload> | Drag & drop file upload |
| Table | <reke-table> | Data table with sorting and expandable rows |
| Dialog | <reke-dialog> | Modal dialog |
| Card | <reke-card> | Content card container |
| Badge | <reke-badge> | Status badge |
| Chip | <reke-chip> | Dismissible chip/tag |
| Tooltip | <reke-tooltip> | Tooltip on hover |
| Alert | <reke-alert> | Inline alert message |
| Toast | <reke-toast> | Toast notification |
Quick Start
Install
npm install reke-uiImport tokens (optional but recommended)
@import 'reke-ui/tokens/css';Use a component
<script type="module">
import 'reke-ui/button';
</script>
<reke-button variant="primary">Click me</reke-button>Or import everything:
import 'reke-ui';Framework Usage
Vue
Vue supports Web Components natively. Just import and use:
<script setup>
import 'reke-ui/button';
import 'reke-ui/input';
</script>
<template>
<reke-button variant="primary" @reke-click="handleClick">
Submit
</reke-button>
<reke-input label="Name" @reke-change="handleChange" />
</template>Vue config: Tell Vue to skip resolving
reke-*tags as Vue components:// vite.config.ts vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('reke-'), }, }, })
React
React needs wrappers for proper event handling. Use the built-in React bindings:
import { Button, Input } from 'reke-ui/react';
function App() {
return (
<>
<Button variant="primary" onRekeClick={() => console.log('clicked')}>
Submit
</Button>
<Input label="Name" onRekeChange={(e) => console.log(e.detail.value)} />
</>
);
}Components with render props (e.g.
TablewithexpandedRowRenderorcolumns[].render) use a React-native bridge: returnReactNode(JSX), passgetRowKeyfor stable keying, and neverimport { html } from 'lit'in app code. SeeREADME-DOC.md→ reke-table → React usage, or install the agent skills below for the full contract.
Vanilla JS
<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>
<script>
document.querySelector('reke-button')
.addEventListener('reke-click', () => console.log('clicked'));
</script>Theming
reke-ui ships with dark (default) and light themes, plus an auto mode that follows OS preference.
<html> <!-- Dark (default) -->
<html data-reke-theme="dark"> <!-- Dark (explicit) -->
<html data-reke-theme="light"> <!-- Light -->
<html data-reke-theme="auto"> <!-- Follows OS preference -->Customizing tokens
Override any CSS custom property to match your brand:
:root {
--reke-color-primary: #8B5CF6;
--reke-color-secondary: #EC4899;
--reke-radius: 8px;
--reke-font-mono: 'Fira Code', monospace;
}See all available tokens in src/tokens/reke-tokens.css.
Agent skills
reke-ui ships LLM-first skills that teach AI coding agents how to consume the library correctly (3-layer token system, component APIs, React bridge contract for components with render props).
npm install reke-ui
npx reke-ui install-skillsThis copies three consumer skills into your project's .claude/skills/ directory:
reke-ui-consumer— install, imports, framework integration, full component reference, React bridge contractreke-design-system— 3-layer token architecture for Tailwind v4 projects (microfrontend-safe scoping)reke-bridge— when and how to bridge web components to your framework (React today; pattern documented for Vue/Svelte)
After install, ask your agent to refresh its skill index: "update skill registry" (or "actualizá las skills"). The agent will then know how to use reke-ui idiomatically — no more guessing or copy-pasted anti-patterns.
Options: --force reinstalls even if versions match, --dry-run previews without writing files.
Development
npm install # Install dependencies
npm run dev # Start Storybook on port 6006
npm run test:run # Run all tests
npm run build # Build for production
npm run lint # Type-checkLicense
MIT