@vielzeug/refine

Accessible, themeable web components built on ore

Installation

pnpm add @vielzeug/refine
npm install @vielzeug/refine
yarn add @vielzeug/refine

Quick Start

// Required once: design tokens and cascade layers
import '@vielzeug/refine/tokens.css';

// Optional browser-default reset
import '@vielzeug/refine/styles/preflight.css';

// Optional typed DOM tag map
import type {} from '@vielzeug/refine/frameworks/elements';

// Register only the components you use
import '@vielzeug/refine/button';
import '@vielzeug/refine/card';
import '@vielzeug/refine/input';
import '@vielzeug/refine/avatar';
import '@vielzeug/refine/avatar-group';
import '@vielzeug/refine/carousel';
import '@vielzeug/refine/datagrid';
import '@vielzeug/refine/marquee';
import '@vielzeug/refine/time-picker';

<ore-button variant="solid" color="primary">Save</ore-button>

<ore-input label="Email" type="email" required></ore-input>

<ore-card padding="lg">
  <span slot="header">Account</span>
  <p>Build forms, layouts, overlays, and feedback UI with native custom elements.</p>
</ore-card>

<ore-avatar src="/alice.jpg" name="Alice"></ore-avatar>
<ore-avatar-group max="3">
  <ore-avatar name="Alice"></ore-avatar>
  <ore-avatar name="Bob"></ore-avatar>
  <ore-avatar name="Carol"></ore-avatar>
</ore-avatar-group>

<ore-carousel>
  <ore-carousel-slide>Slide 1</ore-carousel-slide>
  <ore-carousel-slide>Slide 2</ore-carousel-slide>
</ore-carousel>

Features

• Form-associated controls integrate with native FormData, supported required validation, and form reset.
• Enumerated component properties validate values against their documented options.
• Import components and global styles through explicit package subpaths.
• registerIcons from @vielzeug/refine/icons accepts library-neutral SVG definitions; @vielzeug/refine/icons/iconify adapts local Heroicons, Tabler, and Material Design Icons data, while @vielzeug/refine/icons/lucide adapts selected Lucide icons. Core and structural adapters need no Lucide install; declare the optional lucide peer yourself when using its data or @vielzeug/refine/icons/lucide/all (pnpm add lucide@^1.48.0). See the icon reference.
• heroiconsIcons, tablerIcons, and mdiIcons from @vielzeug/refine/icons/heroicons, /tabler, and /mdi convert caller-named individual @iconify-icons/* data: registerIcons(heroiconsIcons({ Search, Home })). They preserve your app keys without bundling collections or accepting framework components.

Documentation

• Overview
• Usage Guide
• API Reference
• Migration Guide

License

MIT © Helmuth Saatkamp: part of the Vielzeug monorepo.