Appearance
Components
The @rozie-ui families are Rozie's flagship demonstration: pre-compiled, per-framework component packages where one .rozie source compiles to idiomatic React, Vue, Svelte, Angular, Solid, and Lit consumers. Most wrap a battle-tested vanilla-JS engine whose existing framework wrappers are uneven, partial, or — for Lit and friends — entirely missing. Two newer families (Listbox and Slider) carry no engine at all: they are headless, fully-accessible components authored from scratch in a single .rozie file, proving Rozie carries rich interaction on its own.
Consumers install only the package for their framework. No Rozie toolchain, no build-time compile step, no @rozie/* runtime dependency — just the compiled output for the framework they already use.
Every family below ships six packages (-react, -vue, -svelte, -angular, -solid, -lit), a showcase-and-API page, a libraries-comparison page that shows the cross-framework wedge, and a live demo.
The families
Grouped by what they do. Most wrap a vanilla-JS engine; the headless group at the end carries no engine at all.
Data, tables & lists
| Family | Wraps | Showcase |
|---|---|---|
| DataTable | @tanstack/table-core — sorting, filtering, pagination, selection, full column management; table and WAI-ARIA role="grid" modes | /components/data-table |
| SortableList | SortableJS drag-and-drop lists | /components/sortable-list |
Editors
| Family | Wraps | Showcase |
|---|---|---|
| CodeMirror | CodeMirror 6 code editor | /components/codemirror |
| TipTap | TipTap rich-text editor (ProseMirror) | /components/tiptap |
Dates & scheduling
| Family | Wraps | Showcase |
|---|---|---|
| Flatpickr | flatpickr date / time picker | /components/flatpickr |
| FullCalendar | FullCalendar event calendar | /components/fullcalendar |
Charts, maps & graphs
| Family | Wraps | Showcase |
|---|---|---|
| Chart.js | Chart.js canvas charts | /components/chartjs |
| MapLibre | MapLibre GL interactive maps | /components/maplibre |
| FlowCanvas | Rete.js node-flow editor | /components/rete |
Media
| Family | Wraps | Showcase |
|---|---|---|
| Cropper | Cropper.js image cropping | /components/cropper |
| PdfViewer | pdf.js PDF rendering | /components/pdf |
| Carousel | Embla Carousel carousel engine | /components/embla |
Security & forms
| Family | Wraps | Showcase |
|---|---|---|
| Captcha | reCAPTCHA / hCaptcha / Turnstile bot protection | /components/captcha |
Overlays
| Family | Wraps | Showcase |
|---|---|---|
| Popover | Floating UI tooltip + popover positioning | /components/popover |
Headless primitives (no engine)
Authored from scratch in a single .rozie file — no third-party engine, fully accessible.
| Family | Wraps | Showcase |
|---|---|---|
| Listbox | (no engine) headless WAI-ARIA listbox / combobox | /components/listbox |
| Slider | (no engine) headless accessible slider / range | /components/slider |
| Otp | (no engine) headless accessible one-time-code / PIN input | /components/otp |
| Combobox | (no engine) headless WAI-ARIA combobox / autocomplete | /components/combobox |
| Toaster | (no engine) headless accessible toast / notification host | /components/toast |
| Dialog | (native <dialog>) headless accessible modal dialog | /components/dialog |
| Tags | (no engine) headless accessible token / tags input | /components/tags |
| NumberField | (no engine) headless accessible number field / stepper | /components/number-field |
| Pagination | (no engine) headless accessible pagination | /components/pagination |
| DatePicker | (no engine) headless accessible single-date calendar | /components/date-picker |
| Switch | (no engine) headless accessible toggle / switch | /components/switch |
| Resizable | (no engine) headless accessible two-panel splitter / resizable pane | /components/resizable |
| CommandPalette | (no engine) headless accessible cmdk-style command menu | /components/command-palette |
Why these exist
Each family targets a real cross-framework gap: an engine that does its heavy lifting in vanilla JS, but whose framework bindings are either divergent across React/Vue/Svelte/Solid, single-maintainer community efforts for Angular, or simply nonexistent for Lit and web components. Rozie compiles one source into six idiomatic, version-current wrappers — eliminating the per-framework wrapper maintenance that dominates the budget of cross-framework UI libraries.
For the why-and-how of Rozie itself, start with the Guide.