# Compatibility Matrix

This matrix reports **compile-time** compatibility: for every component under `ui/`, whether `compileJSX` plus each adapter's `generate()` step produces diagnostics-free output. Compile-time compatibility (compileJSX + adapter generate() diagnostics). NOT render identity — rendered-output parity is owned by the adapter conformance suite and the eval vector corpus (spec/testing.md Layer 3).

**62 components × 9 adapters — 558 / 558 cells compile clean**

## Matrix

| Component | hono | blade | erb | go-template | jinja | minijinja | mojolicious | twig | xslate |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `accordion` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `alert` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `alert-dialog` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `aspect-ratio` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `avatar` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `badge` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `breadcrumb` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `button` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `button-group` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `calendar` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `card` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `carousel` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `chart` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `checkbox` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `collapsible` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `combobox` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `command` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `context-menu` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `data-table` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `date-picker` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `dialog` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `direction` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `drawer` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `dropdown-menu` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `empty` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `field` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `hover-card` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `icon` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `input` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `input-group` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `input-otp` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `item` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `kbd` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `label` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `menubar` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `native-select` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `navigation-menu` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `pagination` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `popover` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `portal` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `progress` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `radio-group` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `resizable` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `scroll-area` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `select` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `separator` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `sheet` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `sidebar` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `skeleton` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `slider` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `slot` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `spinner` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `switch` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `table` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `tabs` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `textarea` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `toast` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `toggle` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `toggle-group` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `tooltip` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `typography` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| `xyflow` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |

## Legend

Each diagnostic code below links to the known-limitation issue(s) tracking it. Codes with no linked issue fall back to the repo-wide [`known-limitation`](https://github.com/piconic-ai/barefootjs/labels/known-limitation) label.

No diagnostics were reported — every component compiles cleanly on every adapter.

## Render Conformance (fixture corpus)

The component matrix above is **compile-time only**. This section reports the **render-level** state honestly: the shared conformance corpus (`packages/adapter-tests`) is rendered through every adapter's real backend (Go, Ruby, Perl, PHP, Python, Rust) and byte-compared against the Hono reference. Fixtures listed here diverge on at least one adapter — either refused loudly at build time (`conformancePins`) or rendering differently from the reference (`renderDivergences`, skipped in that adapter's conformance suite until fixed). Fixtures absent from this table render to reference parity on every adapter.

**246 / 251 fixtures render to reference parity on every adapter.** The 5 below diverge on at least one:

| Fixture | hono | blade | erb | go-template | jinja | minijinja | mojolicious | twig | xslate |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `dangerous-inner-html-dynamic` | ✓ | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2215) |
| `filter-nested-callback-predicate` | ✓ | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | ✓ | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | ✓ | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) |
| `filter-nested-find-predicate` | ✓ | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2038) |
| `static-array-from-props` | ✓ | BF101 | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | BF101 | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | BF101 | BF101 | BF101 |
| `static-array-from-props-with-component` | ✓ | BF101 | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | BF101 | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | [BF101](https://github.com/piconic-ai/barefootjs/issues/2087) | BF101 | BF101 | BF101 |

`✓` renders to reference parity · `≠` compiles clean but the rendered output diverges (skipped in that adapter's conformance suite until fixed) · a diagnostic code means the adapter refuses the shape loudly at build time.

### Divergence details

- **`dangerous-inner-html-dynamic`**
  - `blade`, `erb`, `go-template`, `jinja`, `minijinja`, `mojolicious`, `twig`, `xslate` — refused at build time with `BF101`
- **`filter-nested-callback-predicate`**
  - `blade`, `go-template`, `jinja`, `minijinja`, `twig`, `xslate` — refused at build time with `BF101`
- **`filter-nested-find-predicate`**
  - `blade`, `erb`, `go-template`, `jinja`, `minijinja`, `mojolicious`, `twig`, `xslate` — refused at build time with `BF101`
- **`static-array-from-props`**
  - `blade`, `erb`, `go-template`, `jinja`, `minijinja`, `mojolicious`, `twig`, `xslate` — refused at build time with `BF101`
- **`static-array-from-props-with-component`**
  - `blade`, `erb`, `go-template`, `jinja`, `minijinja`, `mojolicious`, `twig`, `xslate` — refused at build time with `BF101`

## Data Source

This table is generated from the committed [`ui/compat.lock.json`](https://github.com/piconic-ai/barefootjs/blob/main/ui/compat.lock.json), regenerated with `bun run compat:lock` and drift-checked in CI. Render-level divergences are declared per adapter in `packages/adapter-*/src/render-divergences.ts` (each adapter's conformance suite derives its skip list from the same declaration, so this page and the tests cannot drift apart). Tracked limitations carry the [`known-limitation`](https://github.com/piconic-ai/barefootjs/labels/known-limitation) label.