### Installation with bun

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Install phantom-ui using bun.

```sh
bun add @aejkatappaja/phantom-ui
```

--------------------------------

### Install project dependencies

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/solid-app/README.md

Use this command to install all required packages for the project.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Installation with yarn

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Install phantom-ui using yarn.

```sh
yarn add @aejkatappaja/phantom-ui
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/CONTRIBUTING.md

Clone the repository and install project dependencies using bun.

```bash
git clone https://github.com/Aejkatappaja/phantom-ui.git
cd phantom-ui
bun install
```

--------------------------------

### Install Phantom UI with bun

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/vue.mdx

Install the Phantom UI package using bun. No additional TypeScript setup is required as Vue automatically picks up types.

```sh
bun add @aejkatappaja/phantom-ui
```

--------------------------------

### Install phantom-ui package

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/quick-start.mdx

Use your preferred package manager to install the library.

```sh
npm install @aejkatappaja/phantom-ui
```

```sh
pnpm add @aejkatappaja/phantom-ui
```

```sh
yarn add @aejkatappaja/phantom-ui
```

```sh
bun add @aejkatappaja/phantom-ui
```

--------------------------------

### Quick Start Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Basic usage of phantom-ui to display a card with a loading state.

```html
<phantom-ui loading>
  <div class="card">
    <img src="avatar.png" width="48" height="48" style="border-radius: 50%" />
    <h3>Ada Lovelace</h3>
    <p>First computer programmer, probably.</p>
  </div>
</phantom-ui>
```

--------------------------------

### Installation with pnpm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Install phantom-ui using pnpm.

```sh
pnpm add @aejkatappaja/phantom-ui
```

--------------------------------

### Develop Documentation Site

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/CONTRIBUTING.md

Install dependencies and run the development server for the documentation site.

```bash
cd docs
bun install
bun run dev
```

--------------------------------

### Installation with npm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Install phantom-ui using npm.

```sh
npm install @aejkatappaja/phantom-ui
```

--------------------------------

### Install Phantom UI with npm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/vue.mdx

Install the Phantom UI package using npm. No additional TypeScript setup is required as Vue automatically picks up types.

```sh
npm install @aejkatappaja/phantom-ui
```

--------------------------------

### Run Playground Server

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/CONTRIBUTING.md

Start a local server for interactive testing of components after building the project.

```bash
bun run playground
```

--------------------------------

### Install Phantom UI with yarn

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/vue.mdx

Install the Phantom UI package using yarn. No additional TypeScript setup is required as Vue automatically picks up types.

```sh
yarn add @aejkatappaja/phantom-ui
```

--------------------------------

### Install Phantom UI with pnpm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/vue.mdx

Install the Phantom UI package using pnpm. No additional TypeScript setup is required as Vue automatically picks up types.

```sh
pnpm add @aejkatappaja/phantom-ui
```

--------------------------------

### Run development server

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/solid-app/README.md

Starts the application in development mode with hot reloading.

```bash
npm run dev
```

--------------------------------

### View package structure

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/installation.mdx

Overview of the files and directories installed in node_modules.

```text
node_modules/@aejkatappaja/phantom-ui/
  dist/
    phantom-ui.js        # ES module (Lit as external)
    phantom-ui.cdn.js    # IIFE standalone (Lit included)
    phantom-ui.d.ts      # TypeScript declarations
  custom-elements.json   # IDE/Storybook manifest
  package.json
  LICENSE
  README.md
```

--------------------------------

### Start Angular Development Server

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Run this command to start a local development server. The application will automatically reload on source file changes.

```bash
ng serve
```

--------------------------------

### Install phantom-ui with package managers

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Instructions for installing the phantom-ui package using various package managers like bun, npm, pnpm, and yarn.

```bash
bun add @aejkatappaja/phantom-ui     # bun
npm install @aejkatappaja/phantom-ui # npm
pnpm add @aejkatappaja/phantom-ui    # pnpm
yarn add @aejkatappaja/phantom-ui    # yarn
```

--------------------------------

### SolidJS Usage Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/solid.mdx

Example of using phantom-ui in a SolidJS component, demonstrating the use of the `attr:` prefix for setting HTML attributes.

```tsx
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>
  );
}
```

--------------------------------

### SvelteKit Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Example of using phantom-ui in a SvelteKit application with client-side import.

```svelte
<script>
  import { onMount } from "svelte";

  let user = $state(null);
  let loading = $state(true);

  onMount(async () => {
    import("@aejkatappaja/phantom-ui");
    user = await fetchUser();
    loading = false;
  });
</script>

<phantom-ui {loading}>
  <div class="card">
    <h3>{user?.name ?? "Placeholder Name"}</h3>
    <p>{user?.bio ?? "A short bio goes here."}</p>
  </div>
</phantom-ui>
```

--------------------------------

### Nuxt Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Example of using phantom-ui in a Nuxt application with client-side import.

```vue
<script setup>
import { ref, onMounted } from "vue";

const user = ref(null);
const loading = ref(true);

onMounted(async () => {
  import("@aejkatappaja/phantom-ui");
  user.value = await fetchUser();
  loading.value = false;
});
</script>

<template>
  <ClientOnly>
    <phantom-ui :loading="loading">
      <div class="card">
        <h3>{{ user?.name ?? "Placeholder Name" }}</h3>
        <p>{{ user?.bio ?? "A short bio goes here." }}</p>
      </div>
    </phantom-ui>
  </ClientOnly>
</template>
```

--------------------------------

### Remix Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Example of using phantom-ui in a Remix application with client-side import.

```tsx
import { useEffect, useState } from "react";
import { useLoaderData } from "@remix-run/react";

export default function UserCard() {
  const [ready, setReady] = useState(false);
  const data = useLoaderData();

  useEffect(() => {
    import("@aejkatappaja/phantom-ui").then(() => setReady(true));
  }, []);

  return (
    <phantom-ui loading={!ready}>
      <div className="card">
        <h3>{data.name}</h3>
        <p>{data.bio}</p>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Start Development Server

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/qwik-app/README.md

Launches Vite's development server for local development. This mode performs server-side rendering (SSR).

```shell
npm start # or `yarn start`
```

--------------------------------

### Initialize Phantom UI with bun

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/typescript.mdx

This command utilizes bun to run the Phantom UI initialization script, ensuring proper setup for TypeScript and SSR.

```sh
bunx @aejkatappaja/phantom-ui init
```

--------------------------------

### Next.js Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Example of using phantom-ui in a Next.js application with client-side import.

```tsx
"use client";
import { useState, useEffect } from "react";

export default function UserCard() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    import("@aejkatappaja/phantom-ui");
    fetchUser().then(setUser);
  }, []);

  return (
    <phantom-ui loading={!user}>
      <div className="card">
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Initialize Phantom UI with pnpm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/typescript.mdx

Use this command with pnpm to trigger the automatic setup process for Phantom UI, including TypeScript and SSR configurations.

```sh
pnpm dlx @aejkatappaja/phantom-ui init
```

--------------------------------

### Generate Help for Angular Schematics

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Run this command to get a list of all available schematics for code generation in Angular CLI.

```bash
ng generate --help
```

--------------------------------

### Setup Scripts

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/htmx.mdx

Add both HTMX and Phantom UI scripts to your HTML.

```html
<script src="https://unpkg.com/htmx.org@2"></script>
<script src="https://unpkg.com/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
```

--------------------------------

### Usage Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Example of using phantom-ui component in a React component.

```tsx
import { useState, useEffect } from "react";
import "@aejkatappaja/phantom-ui";

function UserCard() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

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

```

--------------------------------

### Vue + composables

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/data-fetching.md

Example of using phantom-ui with Vue and composables.

```vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import "@aejkatappaja/phantom-ui";

const user = ref(null);
const loading = ref(true);

onMounted(async () => {
  const res = await fetch("/api/user/1");
  user.value = await res.json();
  loading.value = false;
});
</script>

<template>
  <phantom-ui :loading="loading">
    <div class="card">
      <img :src="user?.avatar ?? '/placeholder.png'" width="48" height="48" />
      <h3>{{ user?.name ?? "Placeholder Name" }}</h3>
      <p>{{ user?.bio ?? "A short bio goes here." }}</p>
    </div>
  </phantom-ui>
</template>

```

--------------------------------

### Use phantom-ui in Svelte

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/svelte.mdx

Example of importing the library and using the phantom-ui custom element with Svelte state runes.

```svelte
<script lang="ts">
  import "@aejkatappaja/phantom-ui";
  import { onMount } from "svelte";

  let user = $state(null);
  let loading = $state(true);

  onMount(async () => {
    user = await fetchUser();
    loading = false;
  });
</script>

<phantom-ui {loading}>
  <div class="card">
    <img src={user?.avatar ?? "/placeholder.png"} alt="avatar" class="avatar" />
    <h3>{user?.name ?? "Placeholder Name"}</h3>
    <p>{user?.bio ?? "A short bio goes here."}</p>
  </div>
</phantom-ui>
```

--------------------------------

### SWR

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/data-fetching.md

Example of using phantom-ui with SWR.

```tsx
import useSWR from "swr";
import "@aejkatappaja/phantom-ui";

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useSWR(`/api/users/${userId}`);

  return (
    <phantom-ui loading={isLoading}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}

```

--------------------------------

### Fine-grained control example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to use data attributes like `data-shimmer-ignore`, `data-shimmer-no-children`, `data-shimmer-width`, and `data-shimmer-height` to control shimmer behavior.

```html
<phantom-ui loading>
  <div class="dashboard">
    <div class="logo" data-shimmer-ignore>ACME</div>
    <div class="kpi-row" data-shimmer-no-children>
      <span>$48.2k</span>
      <span>2,847 users</span>
      <span>42ms p99</span>
    </div>
    <img src="/hero.jpg" data-shimmer-width="600" data-shimmer-height="400" />
    <div class="content">
      <p>Each leaf element here gets its own shimmer block.</p>
    </div>
  </div>
</phantom-ui>
```

--------------------------------

### Lists

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/data-fetching.md

Example of using phantom-ui with dynamic lists and the `count` prop.

```tsx
const { data: users, isLoading } = useQuery({
  queryKey: ["users"],
  queryFn: () => fetch("/api/users").then((r) => r.json()),
});

return (
  <phantom-ui loading={isLoading} count={5} count-gap={8}>
    {isLoading ? (
      <div className="row">
        <img src="/placeholder.png" width="32" height="32" />
        <span>Placeholder Name</span>
        <span>placeholder@email.com</span>
      </div>
    ) : (
      users?.map((u) => (
        <div key={u.id} className="row">
          <img src={u.avatar} width="32" height="32" />
          <span>{u.name}</span>
          <span>{u.email}</span>
        </div>
      ))
    )}
  </phantom-ui>
);

```

--------------------------------

### TanStack Query

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/data-fetching.md

Example of using phantom-ui with TanStack Query.

```tsx
import { useQuery } from "@tanstack/react-query";
import "@aejkatappaja/phantom-ui";

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetch(`/api/users/${userId}`).then((r) => r.json()),
  });

  return (
    <phantom-ui loading={isLoading}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}

```

--------------------------------

### React Example with Animation and Reveal

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

React component demonstrating phantom-ui with 'pulse' animation and 'reveal' effect.

```tsx
import "@aejkatappaja/phantom-ui";

function ProfileCard({ user, isLoading }: Props) {
  return (
    <phantom-ui loading={isLoading} animation="pulse" reveal={0.3}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} className="avatar" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A few words about this person go here."}</p>
      </div>
    </phantom-ui>
  );
}

// List with repeat mode
function UserList({ users, isLoading }: Props) {
  return (
    <phantom-ui loading={isLoading} count={5} count-gap={8}>
      <div className="row">
        <img src="/placeholder.png" width="32" height="32" />
        <span>Placeholder Name</span>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Svelte Example with Reveal and Stagger

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Svelte component demonstrating phantom-ui with 'reveal' and 'stagger' effects.

```svelte
<script lang="ts">
  import "@aejkatappaja/phantom-ui";

  export let loading = true;
</script>

<phantom-ui {loading} reveal={0.4} stagger={0.03}>
  <div class="card">
    <img src="/avatar.png" alt="avatar" class="avatar" />
    <h3>Ada Lovelace</h3>
    <p>First computer programmer, probably.</p>
  </div>
</phantom-ui>
```

--------------------------------

### SolidJS Usage

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Example of how to use the phantom-ui component in a SolidJS application.

```tsx
import { createSignal } from "solid-js";
import "@aejkatappaja/phantom-ui";

function ProfileCard() {
  const [loading, setLoading] = createSignal(true);

  return (
    <phantom-ui attr:loading={loading() ? "" : null} animation="shimmer" stagger={0.05}>
      <div class="card">
        <img src="/avatar.png" class="avatar" />
        <h3>Ada Lovelace</h3>
        <p>First computer programmer, probably.</p>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Angular Usage

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Example of how to use the phantom-ui component in an Angular application.

```typescript
import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@aejkatappaja/phantom-ui";

@Component({
  selector: "app-profile",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template:
    "<phantom-ui [attr.loading]="loading() ? '' : null" animation=\"pulse\">
      <div class=\"card\">
        <img src=\"/avatar.png\" class=\"avatar\" />
        <h3>Ada Lovelace</h3>
        <p>First computer programmer, probably.</p>
      </div>
    </phantom-ui>",
})
export class ProfileComponent {
  loading = signal(true);
}
```

--------------------------------

### Install phantom-ui via CDN

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

How to include phantom-ui in a project using a script tag for direct CDN inclusion without a build step.

```html
<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
```

--------------------------------

### Qwik Component Usage

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Example of using phantom-ui within a Qwik component, including client-side import and state management.

```tsx
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";

export default component$(() => {
  const loading = useSignal(true);
  const ready = useSignal(false);

  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(async () => {
    import("@aejkatappaja/phantom-ui");
    ready.value = true;

    const data = await fetchUser();
    // update your state...
    loading.value = false;
  });

  return (
    <>
      {ready.value && (
        <phantom-ui loading={loading.value }>
          <div class="card">
            <img src="/placeholder.png" class="avatar" />
            <h3>Placeholder Name</h3>
            <p>A short bio goes here.</p>
          </div>
        </phantom-ui>
      )}
    </>
  );
});

```

--------------------------------

### Vue Example with Animation and Stagger

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Vue component demonstrating phantom-ui with 'breathe' animation and 'stagger' effect.

```vue
<script setup lang="ts">
import "@aejkatappaja/phantom-ui";

const props = defineProps<{ loading: boolean }>();
</script>

<template>
  <phantom-ui :loading="props.loading" animation="breathe" stagger="0.05">
    <div class="card">
      <img src="/avatar.png" class="avatar" />
      <h3>Ada Lovelace</h3>
      <p>First computer programmer, probably.</p>
    </div>
  </phantom-ui>
</template>
```

--------------------------------

### Repeat mode with React example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Illustrates the repeat mode usage within a React component, conditionally applying the `loading` attribute.

```tsx
// React
<phantom-ui loading={!users} count={5} count-gap={8}>
  <div class="row-template">
    <img src="/placeholder.png" width="32" height="32" />
    <span>Placeholder Name</span>
    <span>placeholder@email.com</span>
  </div>
</phantom-ui>
```

--------------------------------

### Boolean Attributes

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Example of passing boolean attributes directly to phantom-ui.

```tsx
<phantom-ui loading={isLoading}>

```

--------------------------------

### SWR Integration

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Example of using phantom-ui with SWR for data fetching in a React component.

```tsx
import useSWR from "swr";
import "@aejkatappaja/phantom-ui";

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useSWR(`/api/users/${userId}`);

  return (
    <phantom-ui loading={isLoading}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Repeat mode example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Shows how to use the `count` and `count-gap` attributes to generate multiple skeleton rows from a single template element for dynamic lists or tables.

```html
<phantom-ui loading count="5" count-gap="8">
  <div class="user-row">
    <img src="avatar.png" width="32" height="32" />
    <span>John Doe</span>
    <span>john@acme.io</span>
  </div>
</phantom-ui>
```

--------------------------------

### TanStack Query Integration

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Example of using phantom-ui with TanStack Query for data fetching in a React component.

```tsx
import { useQuery } from "@tanstack/react-query";
import "@aejkatappaja/phantom-ui";

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetch(`/api/users/${userId}`).then((r) => r.json()),
  });

  return (
    <phantom-ui loading={isLoading}>
      <div className="card">
        <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
        <h3>{user?.name ?? "Placeholder Name"}</h3>
        <p>{user?.bio ?? "A short bio goes here."}</p>
      </div>
    </phantom-ui>
  );
}
```

--------------------------------

### Vue Component with Phantom UI

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/vue.mdx

Example of a Vue component that fetches user data and displays it using the Phantom UI component. Vue handles boolean attributes like 'loading' correctly.

```vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import "@aejkatappaja/phantom-ui";

const user = ref(null);
const loading = ref(true);

onMounted(async () => {
  user.value = await fetchUser();
  loading.value = false;
});
</script>

<template>
  <phantom-ui :loading="loading">
    <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>
</template>
```

--------------------------------

### List Loading State with Count

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Example of using phantom-ui with `count` and `count-gap` for dynamic lists when data is loading.

```tsx
const { data: users, isLoading } = useQuery({
  queryKey: ["users"],
  queryFn: () => fetch("/api/users").then((r) => r.json()),
});

return (
  <phantom-ui loading={isLoading} count={5} count-gap={8}>
    {isLoading ? (
      <div className="row">
        <img src="/placeholder.png" width="32" height="32" />
        <span>Placeholder Name</span>
        <span>placeholder@email.com</span>
      </div>
    ) : (
      users?.map((u) => (
        <div key={u.id} className="row">
          <img src={u.avatar} width="32" height="32" />
          <span>{u.name}</span>
          <span>{u.email}</span>
        </div>
      ))
    )}
  </phantom-ui>
);
```

--------------------------------

### Incorrect Attribute Binding Example

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/angular.mdx

Avoid directly binding to `[loading]` as it will always set the attribute, even with a 'false' value, which may not produce the desired behavior for boolean attributes.

```html
<!-- Wrong: always sets the attribute (even to "false") -->
<phantom-ui [loading]="loading()">
```

--------------------------------

### HTMX Request Interception and Data Loading

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/htmx-app/index.html

This JavaScript code intercepts HTMX requests to '/api/users', simulates a server response with user data after a delay, and updates the DOM. It also includes a 'reload' function to reset and re-fetch user data, demonstrating a dynamic loading pattern.

```javascript
document.body.addEventListener("htmx:configRequest", (e) => {
  if (e.detail.path === "/api/users") {
    e.preventDefault();
    const users = [
      { name: "Alice Martin", bio: "Frontend engineer at Vercel", avatar: "https://i.pravatar.cc/48?u=alice" },
      { name: "Bob Chen", bio: "Full-stack dev, HTMX enthusiast", avatar: "https://i.pravatar.cc/48?u=bob" },
      { name: "Clara Ruiz", bio: "Design systems lead", avatar: "https://i.pravatar.cc/48?u=clara" },
    ];
    const html = users.map(u => 
      `<div class="card">
         <img src="${u.avatar}" width="48" height="48" />
         <div class="card-body">
           <h3>${u.name}</h3>
           <p>${u.bio}</p>
         </div>
       </div>`
    ).join("");
    const target = document.querySelector("[hx-get='/api/users']");
    setTimeout(() => {
      target.innerHTML = html;
      target.closest("phantom-ui").removeAttribute("loading");
    }, 2000);
  }
});

function reload() {
  const phantom = document.getElementById("user-skeleton");
  phantom.setAttribute("loading", "");
  const target = phantom.querySelector("[hx-get]");
  target.innerHTML = `<div class="card">
      <img width="48" height="48" />
      <div class="card-body">
        <h3>Loading name</h3>
        <p>Loading bio text here</p>
      </div>
    </div>`;
  const users = [
    { name: "Alice Martin", bio: "Frontend engineer at Vercel", avatar: "https://i.pravatar.cc/48?u=alice" },
    { name: "Bob Chen", bio: "Full-stack dev, HTMX enthusiast", avatar: "https://i.pravatar.cc/48?u=bob" },
    { name: "Clara Ruiz", bio: "Design systems lead", avatar: "https://i.pravatar.cc/48?u=clara" },
  ];
  setTimeout(() => {
    target.innerHTML = users.map(u => 
      `<div class="card">
         <img src="${u.avatar}" width="48" height="48" />
         <div class="card-body">
           <h3>${u.name}</h3>
           <p>${u.bio}</p>
         </div>
       </div>`
    ).join("");
    phantom.removeAttribute("loading");
  }, 2000);
}
```

--------------------------------

### Build for production

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/solid-app/README.md

Bundles the application into the dist folder with production optimizations.

```bash
npm run build
```

--------------------------------

### Preview Production Build Locally

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/qwik-app/README.md

Creates a production build of client modules and runs a local server for previewing. Not intended for production use.

```shell
npm run preview # or `yarn preview`
```

--------------------------------

### Development Commands

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/CONTRIBUTING.md

Run development servers, build the project, and execute linting and testing commands.

```bash
bun run storybook       # dev server on :6006
```

```bash
bun run build           # tsc + custom elements manifest + CDN bundle
```

```bash
bun run lint            # biome check
```

```bash
bun run lint:fix        # biome auto-fix
```

```bash
bun run test            # browser tests (Chromium)
```

```bash
bun run test:all        # browser tests (Chromium + Firefox + WebKit)
```

--------------------------------

### Initialize Starlight Project

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/README.md

Run this command in your terminal to scaffold a new Astro project using the Starlight template.

```bash
npm create astro@latest -- --template starlight
```

--------------------------------

### Initialize Phantom UI with npm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/typescript.mdx

Run this command to automatically set up TypeScript declarations and SSR CSS imports for Phantom UI in your project.

```sh
npx @aejkatappaja/phantom-ui init
```

--------------------------------

### Initialize Phantom UI with yarn

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/typescript.mdx

Execute this command using yarn to perform the automatic initialization of Phantom UI, which sets up necessary type definitions and SSR styles.

```sh
yarn dlx @aejkatappaja/phantom-ui init
```

--------------------------------

### Include phantom-ui via CDN

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/installation.mdx

Load the library directly in the browser without a build step.

```html
<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
```

--------------------------------

### Development Commands

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

A list of common commands for developing and building the Phantom UI project.

```bash
bun install
bun run storybook       # dev server on :6006
bun run build           # tsc + custom elements manifest + CDN bundle
bun run lint            # biome check
bun run lint:fix        # biome auto-fix
bun run test            # browser tests (Chromium)
bun run test:all        # browser tests (Chromium + Firefox + WebKit)
bun run playground      # local server to test the component
```

--------------------------------

### Build for Production

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/qwik-app/README.md

Generates production-ready client and server modules. Includes a TypeScript type check.

```shell
npm run build # or `yarn build`
```

--------------------------------

### Debug Mode

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/attributes.md

Outlines each measured block with an index, useful for inspecting how phantom-ui interprets your DOM. Leaf blocks get a pink outline and a numeric label (`0`, `1`, `2`...), container blocks get a blue outline and a `C`-prefixed label (`C0`, `C1`...). Toggle on temporarily during development to debug unexpected skeletons.

```html
<phantom-ui loading debug>...</phantom-ui>
```

--------------------------------

### Initialize TypeScript Declaration with bun

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Initialize TypeScript declaration file using bun.

```sh
bunx @aejkatappaja/phantom-ui init

```

--------------------------------

### Add Integrations with npm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/qwik-app/README.md

Use this command to add additional integrations to your Qwik project, such as deployment targets or features.

```shell
npm run qwik add # or `yarn qwik add`
```

--------------------------------

### Import phantom-ui

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/quick-start.mdx

Include the library in your project via module import or CDN.

```js
import "@aejkatappaja/phantom-ui";
```

```html
<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
```

--------------------------------

### Project Directory Structure

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/README.md

The standard file layout for an Astro + Starlight project.

```text
.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   └── docs/
│   └── content.config.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```

--------------------------------

### Manually trigger init script

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Commands to manually run the phantom-ui initialization script using different package managers, useful when the postinstall script is skipped.

```bash
npx @aejkatappaja/phantom-ui init    # npm
bunx @aejkatappaja/phantom-ui init   # bun
pnpx @aejkatappaja/phantom-ui init   # pnpm
yarn dlx @aejkatappaja/phantom-ui init  # yarn
```

--------------------------------

### Qwik Client-Side Import

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to import the phantom-ui component client-side only in Qwik.

```tsx
// Qwik
import { component$, useVisibleTask$ } from "@builder.io/qwik";

export default component$(() => {
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(async () => {
    import("@aejkatappaja/phantom-ui");
  });

  return <phantom-ui loading>...</phantom-ui>;
});

```

--------------------------------

### TypeScript Declaration for Qwik

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/qwik.mdx

Manual TypeScript declaration for phantom-ui in Qwik if the postinstall script fails.

```typescript
import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";

declare module "@builder.io/qwik" {
  namespace QwikJSX {
    interface IntrinsicElements {
      "phantom-ui": PhantomUiAttributes & Record<string, unknown>;
    }
  }
}

```

--------------------------------

### Qwik City Project Structure

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/qwik-app/README.md

Illustrates the typical directory structure for a Qwik City project, including public assets, components, and routes.

```tree
├── public/
│   └── ...
└── src/
    ├── components/
    │   └── ...
    └── routes/
        └── ...
```

--------------------------------

### Build Angular Project

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Execute this command to compile your Angular project. The build artifacts will be stored in the `dist/` directory. This command optimizes the application for performance and speed by default for production builds.

```bash
ng build
```

--------------------------------

### Stagger Delay

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/attributes.md

Delay in seconds between each block's animation start. Creates a wave effect where blocks animate one after another instead of all at once. Works with all animation modes.

```html
<phantom-ui loading stagger="0.05">...</phantom-ui>
```

--------------------------------

### Initialize TypeScript Declaration with pnpm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Initialize TypeScript declaration file using pnpm.

```sh
pnpm dlx @aejkatappaja/phantom-ui init

```

--------------------------------

### Initialize TypeScript Declaration with npm

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Initialize TypeScript declaration file using npm.

```sh
npx @aejkatappaja/phantom-ui init

```

--------------------------------

### Customize phantom-ui for themes

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/css-custom-properties.md

Adjust shimmer colors and backgrounds to match specific light or dark theme containers.

```css
/* Dark theme */
.dark phantom-ui {
  --shimmer-color: rgba(255, 255, 255, 0.3);
  --shimmer-bg: rgba(255, 255, 255, 0.08);
}

/* Light theme */
.light phantom-ui {
  --shimmer-color: rgba(0, 0, 0, 0.08);
  --shimmer-bg: rgba(0, 0, 0, 0.06);
}
```

--------------------------------

### Initialize TypeScript Declaration with yarn

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/react.mdx

Initialize TypeScript declaration file using yarn.

```sh
yarn dlx @aejkatappaja/phantom-ui init

```

--------------------------------

### CSS custom properties for styling

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to style the phantom-ui component using CSS custom properties.

```css
phantom-ui {
  --shimmer-color: rgba(100, 200, 255, 0.3);
  --shimmer-duration: 2s;
  --shimmer-bg: rgba(100, 200, 255, 0.08);
}
```

--------------------------------

### Run Angular Unit Tests

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Use this command to execute unit tests for your Angular project using the Vitest test runner.

```bash
ng test
```

--------------------------------

### Correct vs. Incorrect `attr:` prefix usage

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/solid.mdx

Illustrates the correct way to use the `attr:` prefix with null to remove an attribute, versus the incorrect way which sets the attribute to a string value.

```tsx
// 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()}>
```

--------------------------------

### SvelteKit Client-Side Import

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to import the phantom-ui component client-side only in SvelteKit.

```svelte
<!-- SvelteKit -->
<script>
  import { onMount } from "svelte";
  onMount(() => import("@aejkatappaja/phantom-ui"));
</script>
```

--------------------------------

### Add React-specific ESLint plugins

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/react-app/README.md

Integrate eslint-plugin-react-x and eslint-plugin-react-dom for specialized React linting.

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Nuxt Client-Side Import

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to import the phantom-ui component client-side only in Nuxt.

```vue
<!-- Nuxt -->
<script setup>
onMounted(() => import("@aejkatappaja/phantom-ui"));
</script>

<template>
  <ClientOnly>
    <phantom-ui loading>...</phantom-ui>
  </ClientOnly>
</template>
```

--------------------------------

### Next.js Client-Side Import

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

Demonstrates how to import the phantom-ui component client-side only in Next.js.

```tsx
// Next.js
"use client";
import { useEffect } from "react";

export default function Page() {
  useEffect(() => { import("@aejkatappaja/phantom-ui"); }, []);
  return <phantom-ui loading>...</phantom-ui>;
}
```

--------------------------------

### Configure type-aware ESLint rules

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/react-app/README.md

Update the ESLint configuration to include type-checked rules for TypeScript files.

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Manual JSX type declarations for Qwik

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

TypeScript code for manually declaring phantom-ui types in JSX environments for Qwik.

```typescript
import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";

declare module "@builder.io/qwik" {
  namespace QwikJSX {
    interface IntrinsicElements {
      "phantom-ui": PhantomUiAttributes & Record<string, unknown>;
    }
  }
}
```

--------------------------------

### Toggle loading state programmatically

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/quick-start.mdx

Control the shimmer effect by adding or removing the loading attribute from the phantom-ui element.

```js
const skeleton = document.querySelector("phantom-ui");

// Show loading
skeleton.setAttribute("loading", "");

// Fetch data...
const data = await fetchUser();

// Reveal content
skeleton.removeAttribute("loading");
```

--------------------------------

### Pre-hydration CSS Import

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Import the CSS file to hide content before JavaScript loads.

```css
import "@aejkatappaja/phantom-ui/ssr.css";
```

--------------------------------

### Analyze Custom Elements

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/CONTRIBUTING.md

Regenerate the custom-elements.json file if properties have been added or changed.

```bash
cem analyze
```

--------------------------------

### Pre-hydration CSS Styles

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/ssr.md

Add these CSS rules directly in your <head> for the CDN build to hide content before JavaScript loads.

```html
<style>
  phantom-ui[loading] * {
    -webkit-text-fill-color: transparent !important;
    pointer-events: none;
    user-select: none;
  }
  phantom-ui[loading] img, phantom-ui[loading] svg,
  phantom-ui[loading] video, phantom-ui[loading] canvas,
  phantom-ui[loading] button, phantom-ui[loading] [role="button"] {
    opacity: 0 !important;
  }
</style>
```

--------------------------------

### TypeScript Declaration for SolidJS

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/solid.mdx

Manual TypeScript declaration for phantom-ui in SolidJS if the postinstall script does not generate `src/phantom-ui.d.ts`.

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

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

--------------------------------

### Run Angular End-to-End Tests

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Execute this command to run end-to-end tests for your Angular application. Note that Angular CLI does not include an end-to-end testing framework by default.

```bash
ng e2e
```

--------------------------------

### Wrap content with phantom-ui

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/guides/quick-start.mdx

Wrap your existing DOM elements with the phantom-ui component and use the loading attribute to trigger the shimmer effect.

```html
<phantom-ui loading>
  <div class="card">
    <img src="avatar.png" width="48" height="48" style="border-radius: 50%" />
    <h3>Ada Lovelace</h3>
    <p>First computer programmer, probably.</p>
  </div>
</phantom-ui>
```

--------------------------------

### Generate Angular Component

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/examples/angular-app/README.md

Use this command to generate a new component within your Angular project. For other schematics like directives or pipes, use `ng generate --help`.

```bash
ng generate component component-name
```

--------------------------------

### Basic Usage

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/htmx.mdx

Wrap HTMX-powered content with `<phantom-ui loading>` and remove the loading attribute on server response.

```html
<phantom-ui loading>
  <div hx-get="/api/users"
       hx-trigger="load"
       hx-on::after-swap="this.closest('phantom-ui').removeAttribute('loading')">
    <div class="card">
      <img width="48" height="48" />
      <h3>Placeholder Name</h3>
      <p>A short bio goes here.</p>
    </div>
  </div>
</phantom-ui>
```

--------------------------------

### Angular Component Usage with Phantom UI

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/frameworks/angular.mdx

Integrate Phantom UI components into an Angular component by importing CUSTOM_ELEMENTS_SCHEMA and the package. Ensure to use attribute binding for properties like 'loading'.

```typescript
import { Component, signal, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@aejkatappaja/phantom-ui";

@Component({
  selector: "app-user-card",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <phantom-ui [attr.loading]="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>
  `,
})
export class UserCardComponent {
  loading = signal(true);
  user = signal(null);

  async ngOnInit() {
    const data = await fetchUser();
    this.user.set(data);
    this.loading.set(false);
  }
}
```

--------------------------------

### Wire up color controls

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/playground/index.html

This function sets up event listeners to update an element's attribute with a dynamically generated RGBA color value based on user input for hex color and alpha. It's used for controlling 'shimmer-color' and 'background-color'.

```javascript
function wireColor(colorId, alphaId, outputId, attr) {
  const color = document.getElementById(colorId);
  const alpha = document.getElementById(alphaId);
  const output = document.getElementById(outputId);
  const update = () => {
    output.textContent = alpha.value;
    el.setAttribute(attr, hexToRgba(color.value, alpha.value));
  };
  color.addEventListener("input", update);
  alpha.addEventListener("input", update);
}

wireColor("ctl-shimmer-color", "ctl-shimmer-alpha", "out-shimmer-alpha", "shimmer-color");
wireColor("ctl-bg-color", "ctl-bg-alpha", "out-bg-alpha", "background-color");
```

--------------------------------

### Manual JSX type declarations for React / Next.js / Remix

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/README.md

TypeScript code for manually declaring phantom-ui types in JSX environments for React, Next.js, and Remix.

```typescript
import type { PhantomUiAttributes } from "@aejkatappaja/phantom-ui";

declare module "react/jsx-runtime" {
  export namespace JSX {
    interface IntrinsicElements {
      "phantom-ui": PhantomUiAttributes;
    }
  }
}
```

--------------------------------

### Loading State

Source: https://github.com/aejkatappaja/phantom-ui/blob/main/docs/src/content/docs/reference/attributes.md

Show the shimmer overlay when present. Remove to reveal real content.

```html
<!-- Loading state -->
<phantom-ui loading>...</phantom-ui>

<!-- Content revealed -->
<phantom-ui>...</phantom-ui>
```