Skip to content
onsystemv0.6.0
Theme

Rule

no-unknown-prop

error by default

Props must exist on the component (own props or the HTML attributes it forwards).

What it catches
Props a component does not accept, own or inherited (tone, isDisabled)
Why it matters
Props from other libraries (tone, isDisabled, isOpen) do nothing or break the build. The rule suggests the prop this system uses, with its allowed values, and explains how Radix (asChild) and Base UI (render) compose when an agent mixes them up.

Example

What check_ui returned for this code against the demo design system when the site was built, from version 0.6.0.

What the agent wrote
<div className="grid gap-2">  <Badge tone="success">Active</Badge>  <Input isDisabled placeholder="Workspace name" /></div>
After the fixthe rule’s own fixes
<div className="grid gap-2">  <Badge variant="success">Active</Badge>  <Input disabled placeholder="Workspace name" /></div>
check_ui

  1. error2:10fix included

    <Badge> has no prop "tone". Did you mean "variant" ("default" | "secondary" | "destructive" | "success" | "outline")?

  2. error3:10fix included

    <Input> has no prop "isDisabled". Did you mean "disabled"?

How the fix is chosen

Closest prop, with cross-library synonyms (tone → variant) and equivalents in either direction (checked ↔ isSelected, open ↔ isOpen); asChild on a Base UI component (or render on a Radix one) gets how that library composes.

Every finding in the example carries its fix as text edits, which the agent applies, and so does eslint --fix. The code after the fix is those edits, applied.

Options

Its default severity is "error". Set it to "off", "warn" or "error" in onsystem.config.json, or as onsystem/no-unknown-prop in the ESLint plugin.

onsystem.config.json
{  "rules": {    "no-unknown-prop": "warn"  }}

The config file covers the rest, including overrides for folders.

Suppressing a finding

When a finding is intended, a comment turns the rule off for the next line and says why after --. Checked when the site was built: the comment hides the finding on the line below it, and the others stay.

With the comment
<div className="grid gap-2">  {/* onsystem-disable-next-line no-unknown-prop -- why this one is intended */}  <Badge tone="success">Active</Badge>  <Input isDisabled placeholder="Workspace name" /></div>

onsystem-disable-next-line covers the next line, onsystem-disable-line its own, and /* onsystem-disable */ the rest of the file (at the top, the whole file). Without rule names they turn every rule off. A misspelled rule name is reported as a suppression warning, with the closest one, and suppresses nothing; syntax errors cannot be suppressed. For whole folders or kinds of files, such as legacy screens or generated code, use overrides in the config.