Solid

Setup

npm

npm install @aejkatappaja/phantom-ui

pnpm

pnpm add @aejkatappaja/phantom-ui

yarn

yarn add @aejkatappaja/phantom-ui

bun

bun add @aejkatappaja/phantom-ui

The postinstall script generates a phantom-ui.d.ts file for JSX types automatically.

Usage

Solid uses the attr: prefix to set HTML attributes on custom elements:

import { createSignal, createResource } from "solid-js";
import "@aejkatappaja/phantom-ui";

function UserCard() {
  const [user] = createResource(fetchUser);

  return (
    <phantom-ui attr:loading={user.loading ? "" : null}>
      <div class="card">
        <img src={user()?.avatar ?? "/placeholder.png"} class="avatar" />
        <h3>{user()?.name ?? "Placeholder Name"}</h3>
        <p>{user()?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}

Important: attr: prefix

Solid treats unknown props as DOM properties by default. Use attr:loading to set it as an HTML attribute:

// Correct — null removes the attribute entirely
<phantom-ui attr:loading={loading() ? "" : null}>

// Wrong — attr:loading={false} sets loading="false" in the DOM,
// which the CSS selector phantom-ui[loading] still matches
<phantom-ui attr:loading={loading()}>

TypeScript

If the postinstall did not generate src/phantom-ui.d.ts, create it manually:

import type { SolidPhantomUiAttributes } from "@aejkatappaja/phantom-ui";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "phantom-ui": SolidPhantomUiAttributes;
    }
  }
}