Revo UI — Open-source components for data-rich applications

Build data-rich applications with charts, AI chat, a PDF viewer, editable timelines, date controls, and more.

Revo UI brings these components to React, Vue, Angular, Svelte, Preact, and vanilla TypeScript, alongside the controls and layouts needed to compose complete workflows.

Lightweight and tree-shakeable: import only the controls you use. The bundle-size badge measures the published 4.0.12 React SvgButton import, including automatic styles and bundled Preact; React is excluded as a peer dependency.

Live components · Interactive overview · Framework guides · RevoGrid · Pro documentation

View a static preview

Get started

pnpm add @revolist/ui

For a quick start in vanilla TypeScript, add <div id="app"></div> to your page and render a button:

import { createFrameworkMount, uiComponents } from '@revolist/ui/framework';

const mount = createFrameworkMount(document.querySelector<HTMLElement>('#app')!, () => {});
mount.render(uiComponents.Button, {
  children: 'Create report',
  onClick: () => alert('Report created'),
});
// Call mount.destroy() when removing the view.

Try the live gallery or choose a framework guide: React · Vue · Angular · Svelte · Preact · Vanilla TypeScript.

React, Vue, Angular and Svelte adapters automatically load their component styles. For extracted CSS, use the matching /unstyled entry and import shared styles once:

import '@revolist/ui/styles.css';

For smaller extracted stylesheets, use styles/base.css and only the required families. Direct Preact/native rendering also uses explicit CSS. See automatic/extracted styles, CSP configuration and bundle-size budgets.

For server-rendered applications, see the SSR and hydration guide for framework recipes, initial CSS delivery, fallbacks and CSP.

Browser JavaScript / CDN (no build step)

The standalone browser builds below use the published 4.0.12 release. Pin CSS and JavaScript to the same released version.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@revolist/ui@4.0.12/styles.css">
<div id="report-action" class="rv-ui"></div>
<script type="module">
import { createFrameworkMount, uiComponents } from
  'https://cdn.jsdelivr.net/npm/@revolist/ui@4.0.12/browser/revo-ui.js';

const mount = createFrameworkMount(document.querySelector('#report-action'), () => {});
let count = 0;
function update() {
  mount.render(uiComponents.Button, {
    variant: 'primary',
    children: 'Create report · ' + count,
    onClick: () => { count++; update(); },
  });
}
update();
// Call mount.destroy() before removing the host view.
</script>

For a classic script, load https://cdn.jsdelivr.net/npm/@revolist/ui@4.0.12/browser/revo-ui.global.js and use const { createFrameworkMount, uiComponents } = RevoUI instead of the import. Both builds bundle their renderer and shared utilities; no import map or framework runtime is needed. Serve your HTML over HTTP(S) in a modern browser.

You can replace the CDN prefix with https://unpkg.com/@revolist/ui@4.0.12, or self-host the package files. The unpkg and jsdelivr package defaults point to the classic script. The @revolist/ui/browser export points to the standalone ES module. Existing npm/framework ESM entries remain available for tree-shaking; host-framework adapters still require their respective frameworks.

The complete browser bundles include the component catalog and PDF engine. PDF viewers also need browser/pdf-viewer.css and the matching browser/pdf.worker.min.mjs served from your own origin, with its URL supplied as workerSrc. Direct cross-origin CDN Worker URLs are not supported by the browser Worker constructor. Configure PDF document/asset access for your application.

See the CDN examples in Docs for complete module and classic-script HTML and lifecycle guidance.

Framework support

Use the same component library and shared styles across frameworks, while keeping application state in your chosen stack.

Components

Explore live previews, variants, and expandable code examples on the website.

• Buttons — Actions, icon buttons, toggles, and button groups.
• Inputs and forms — Text, search, numbers, validation, and field layouts.
• Selects and pickers — Searchable dropdowns, multiple selections, user images, and assignees.
• Selection controls — Checkboxes, switches, radio buttons, and choice chips.
• Tabs and lists — Tabs, segmented controls, and selectable lists.
• Sliders — Single values and ranges with labels and value badges.
• Timeline — Draggable, resizable events with colors and tooltips.
• Calendars and dates — Date and time pickers, ranges, and weekly planning.
• Charts — Bar, line, and area charts with tooltips and range selection.
• Tooltip API and behavior — Placement, timing groups, controlled state, rich/async content, delegation, events, and imperative methods.
• Dialogs and tooltips — Dialogs, confirmations, popovers, and tooltips.
• Menus and toolbars — Dropdown menus, nested commands, and toolbar actions.
• Status and feedback — Badges, alerts, loading indicators, and empty states.
• Layout — Panels, resizable split views, and expandable sections.
• Pagination — Page navigation for tables and lists.
• Progress and rating — Progress bars, circular indicators, and star ratings.
• Activity messages — Updates with avatars, timestamps, and actions.
• AI assistant — Chat messages, prompts, suggestions, and task states.
• PDF viewer — PDF navigation, search, zoom, and download controls.
• Color — Choose a color from a palette or picker and apply shared semantic interface colors.
• Field configurators — Compose field libraries, selected-field lists, ordering, summaries, actions and drop feedback from shared pieces.
• Formatting controls — Typography choices, icon choices, inspector sections, preview comparisons and contextual filter badges.

Complete component reference

For individual com