RealDevUI

Framework-agnostic UI component library built with Stencil.js. Works natively in React, Angular, Vue, Ionic and plain HTML — no wrappers, no adapters, no framework lock-in.

Includes built-in support for Brazilian data formats: CPF, CNPJ, CEP, phone and currency masks with automatic validation.

Components

| Component | Description | Status | |---|---|---| | rd-button | Button with variants, sizes, loading state and icon slots | ✅ Stable | | rd-input | Input with Brazilian masks (CPF, CNPJ, CEP, phone, currency) and validation | ✅ Stable | | rd-badge | Status badge/chip with variants and dot indicator | ✅ Stable | | rd-select | Select/combobox with search, single and multi-select, async loading | ✅ Stable | | rd-toast | Toast notification system with types, positions and global API | ✅ Stable | | rd-modal | Modal/dialog with header, body slot, footer slot and keyboard support | ✅ Stable | | rd-datepicker | Date picker with Brazilian format (dd/mm/yyyy), min/max, keyboard and manual input | ✅ Stable | | rd-table | Data table with sorting, row selection, loading skeleton, striped and empty state | ✅ Stable | | rd-skeleton | Loading skeleton with shimmer/pulse animations for text, rect and circle shapes | ✅ Stable | | rd-page | Pagination with ellipsis, page-size selector and result count | ✅ Stable |

Installation

npm install @rafaelrezende46/realdevui

Usage

Via script tag (any framework or plain HTML)

<script type="module" src="https://cdn.jsdelivr.net/npm/@rafaelrezende46/realdevui/dist/RealDevUI/RealDevUI.esm.js"></script>

<rd-button variant="primary">Save</rd-button>
<rd-input label="CPF" mask="cpf" auto-validate></rd-input>
<rd-badge variant="success">Active</rd-badge>

React

import { defineCustomElements } from '@rafaelrezende46/realdevui/loader';
defineCustomElements();

function App() {
  return (
    <>
      <rd-button variant="primary">Save</rd-button>
      <rd-input label="Phone" mask="phone" clearable></rd-input>
    </>
  );
}

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { defineCustomElements } from '@rafaelrezende46/realdevui/loader';

defineCustomElements(window);

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Vue

// main.ts
import { defineCustomElements } from '@rafaelrezende46/realdevui/loader';
defineCustomElements();

<template>
  <rd-input label="CNPJ" mask="cnpj" auto-validate></rd-input>
</template>

Brazilian masks

rd-input includes built-in masks for common Brazilian data formats:

| Mask | Format | Auto-validates | |---|---|---| | phone | (11) 99999-9999 — detects mobile vs landline | — | | cpf | 000.000.000-00 | ✅ with auto-validate | | cnpj | 00.000.000/0000-00 | ✅ with auto-validate | | cep | 00000-000 | — | | currency | R$ 1.234,56 | — |

<rd-input label="CPF" mask="cpf" auto-validate placeholder="000.000.000-00"></rd-input>
<rd-input label="CNPJ" mask="cnpj" auto-validate placeholder="00.000.000/0000-00"></rd-input>
<rd-input label="CEP" mask="cep" clearable></rd-input>
<rd-input label="Phone" mask="phone" clearable></rd-input>
<rd-input label="Value" mask="currency"></rd-input>

rd-select — flexible options

rd-select accepts options in multiple formats — no for loop required:

<!-- Array of objects -->
<rd-select id="states"></rd-select>
<script>
  document.querySelector('#states').options = [
    { value: 'sp', label: 'São Paulo' },
    { value: 'rj', label: 'Rio de Janeiro' },
  ];
</script>

<!-- Array of strings -->
<rd-select id="tags"></rd-select>
<script>
  document.querySelector('#tags').options = ['React', 'Angular', 'Vue'];
</script>

<!-- Custom field names from API response -->
<rd-select value-field="id" label-field="nome" id="cities"></rd-select>
<script>
  document.querySelector('#cities').options = [
    { id: 1, nome: 'São Paulo' },
    { id: 2, nome: 'Campinas' },
  ];
</script>

<!-- JSON string inline (useful in any template engine) -->
<rd-select options='[{"value":"sp","label":"São Paulo"}]'></rd-select>

Multi-select with search:

<rd-select multiple searchable label="Technologies" placeholder="Select..."></rd-select>

rd-toast — global API

Place <rd-toast> once in your app and call .show() from anywhere:

<rd-toast id="toast" position="top-right"></rd-toast>

<script>
  const toast = document.getElementById('toast');

  toast.show({ message: 'Saved!', type: 'success' });
  toast.show({ message: 'Something went wrong.', type: 'error' });
  toast.show({ message: 'Check your data.', type: 'warning', duration: 6000 });
  toast.show({ message: 'Update available.', type: 'info', duration: 0, closable: true });
</script>

Positions: top-right · top-center · top-left · bottom-right · bottom-center · bottom-left

rd-modal

<rd-button onclick="document.getElementById('modal').show()">Open</rd-button>

<rd-modal id="modal" modal-title="Confirm deletion">
  <p>Are you sure? This action cannot be undone.</p>
  <div slot="footer">
    <rd-button variant="secondary" onclick="document.getElementById('modal').hide()">Cancel</rd-button>
    <rd-button variant="danger" onclick="document.getElementById('modal').hide()">Delete</rd-button>
  </div>
</rd-modal>

Sizes: sm · md (default) · lg · full

Closes on: backdrop click · Esc key · close button · hide() method

Theming

All components use CSS custom properties. Override them globally to match your brand:

:root {
  --rd-color-primary: #7c3aed;
  --rd-color-primary-hover: #6d28d9;
  --rd-color-danger: #dc2626;
  --rd-color-success: #16a34a;
  --rd-color-warning: #ca8a04;
  --rd-color-info: #0891b2;
  --rd-font-family: 'Inter', sans-serif;
  --rd-radius-md: 8px;
}

| Token | Default | Description | |---|---|---| | --rd-color-primary | #2563eb | Primary color (buttons, focus rings, active states) | | --rd-color-danger | #dc2626 | Danger/error color | | --rd-color-success | #16a34a | Success color | | --rd-color-warning | #ca8a04 | Warning color | | --rd-color-info | #0891b2 | Info color | | --rd-color-text | #111827 | Primary text | | --rd-color-text-muted | #6b7280 | Secondary text | | --rd-color-border | #e5e7eb | Border color | | --rd-color-bg | #ffffff | Background | | --rd-font-family | system-ui | Font family | | --rd-radius-md | 6px | Default border radius |

Getting Started (local development)

git clone https://github.com/rafaelrezende46/RealDevUI.git
cd RealDevUI
npm install
npm start

Opens at http://localhost:3333 with live reload. Each component has its own tab with interactive demos.

npm test        # run all tests
npm run build   # production build
npm run lint    # lint TypeScript

Components reference

Auto-generated API docs (props, events, slots) for each component:

• rd-button
• rd-input
• rd-badge
• rd-select
• rd-toast
• rd-modal

Contributing

git clone https://github.com/rafaelrezende46/RealDevUI.git
cd RealDevUI
npm install
npm start

Each component lives in src/components/<name>/. Follow the existing pattern: .tsx + .scss + .spec.ts. Run npm test before submitting a PR.

License

MIT © Rafael Rezende