enforce-pluma-elements

Use this rule to keep application code on the Pluma component vocabulary when Pluma has a prescribed component for a native element.

This rule is intentionally narrower than a broad raw HTML ban. It does not ban layout elements such as div, section, or nav. It only blocks elements that have a direct Pluma replacement policy.

Incorrect

<button type="button">Save</button>
<a href="/settings">Settings</a>
<input type="email" />
<textarea />
<select />
<h2>Settings</h2>
<code>workspace_id</code>
<img src="/avatar.png" alt="" />
<form onSubmit={handleSubmit}>...</form>

Correct

import { Code, Form, Heading, Image, Link, PlainButton, Select, TextArea, TextField } from '@customerio/pluma-components/react';

<PlainButton>Save</PlainButton>
<Link href="/settings">Settings</Link>
<TextField type="email" label="Email" />
<TextArea label="Description" />
<Select label="Status" options={options} />
<Heading level="2">Settings</Heading>
<Code>workspace_id</Code>
<Image src="/avatar.png" alt="" />
<Form onSubmit={handleSubmit}>...</Form>

Polymorphic elements

The rule also reports static polymorphic element values, including on Pluma components. A Pluma component only gets an exception when the component's public API intentionally exposes that native semantic element while Pluma still owns the behavior and styling. For example, DropdownMenuItem as="label" is allowed because it remains a menu item; the label tag is just the semantic surface. Other static native values, such as Box as="button" or Grid as="dl", should use the matching Pluma component instead.

<LocalBox as="button">Save</LocalBox>

Use the matching Pluma component instead.

File inputs and semantic exceptions

Use FileField instead of native file inputs.

DropdownMenuItem as="label" is allowed because the menu item behavior and styling remain Pluma-owned, while the label is just the native semantic surface.

import { DropdownMenuItem, FileField } from '@customerio/pluma-components/react';

<FileField onFileSelected={handleFileSelected} />
<DropdownMenuItem as="label">Toggle</DropdownMenuItem>

Native elements with replacements