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

Run npx @aejkatappaja/phantom-ui init once to generate a phantom-ui.d.ts file for JSX types (or create it manually, see TypeScript below).

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 you prefer not to run init, create src/phantom-ui.d.ts manually:

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

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