> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qomicex.top/llms.txt
> Use this file to discover all available pages before exploring further.
# UI component library (.p-* styles)
## UI component library (.p-\* styles)
The launcher ships a built-in set of `.p-*` style components for plugins (`plugin-css.ts`). They are injected automatically into plugin pages and Overlay windows (Overlay window)and follow the light/dark theme. Plugins can use them without importing any CSS file.
## Theme variables
All colors are defined through CSS variables that follow the launcher's light/dark theme automatically:
```css theme={null}
--background --foreground --card --card-foreground
--popover --popover-foreground --primary --primary-foreground
--secondary --secondary-foreground --muted --muted-foreground
--accent --accent-foreground --destructive --destructive-foreground
--border --input --ring
```
Reference them in your plugin styles:
```css theme={null}
.my-box { color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
```
### How theme following works
* Plugin pages and Overlay windows **follow the launcher's light/dark theme automatically**: the launcher injects the current theme's CSS variables into the plugin environment (synced via the `__qomicex_theme` postMessage), so light/dark switches take effect immediately.
* The plugin `body` background is **transparent**, exposing the launcher background (the plugin container needs no background of its own; just use the CSS variables).
* Theme variables are available both in plugin pages (inline/sandbox) and in Overlay windows (iframe).
## Component list
### Card
```html theme={null}
```
* `data-p-tab` points to a panel with `id="panel-{name}"`.
* Click-to-switch is handled automatically by the injected script; you do not need to write any JS.
* Supported in Overlay windows as well.
### Switch
```html theme={null}
```
* In an Overlay window, to use a Switch to show or hide a panel, add `data-p-switch="panelId"` to the input and the script toggles the matching `id` element automatically.
### Checkbox
```html theme={null}
```
### Progress
```html theme={null}
```
### Tooltip
```html theme={null}
Hover me
```
### Color picker
```html theme={null}
Color
```
## Icons (React components)
Icons ship with the component library: **synchronous, zero IPC, tree-shakeable**. In React
plugins do not hand-roll SVGs, and do not wrap the `getIconSvg` bridge yourself.
### `` — per-icon static import (recommended)
```tsx theme={null}
import { Glyph } from '@qomicex/plugin-ui'
import { ServerIcon } from '@qomicex/plugin-ui/icons/server'
import { FolderOpenIcon } from '@qomicex/plugin-ui/icons/folder-open'
```
* The subpath is the class name without the `fa-solid fa-` prefix; brand icons add `brand-`
(`fa-brands fa-github` → `@qomicex/plugin-ui/icons/brand-github`)
* The export name is PascalCase + `Icon`
* The bundler keeps only the icons you import, and a wrong icon name **fails at build time**
instead of reaching the runtime
* Filled with `currentColor`, so it follows the theme automatically; pass `label` for an
accessible name
### `` — when the icon name comes from runtime data
```tsx theme={null}
import { Icon } from '@qomicex/plugin-ui'
```
`name` is a runtime string the bundler cannot analyse, so the **entire icon table (\~160KB) is
lazily loaded as a separate chunk** — only downloaded when an `` actually renders. Prefer
`` whenever the name is known at compile time.
Unknown names render `null` (no empty gap) and `console.warn` in dev builds.
### Discovering icons
```tsx theme={null}
import { ICON_NAMES, hasIcon } from '@qomicex/plugin-ui'
ICON_NAMES.includes('fa-solid fa-server') // true
hasIcon('fa-solid fa-skull') // false
```
At runtime (including theme and plugin-private icons): `await __PLUGIN_API__.call('listIcons')`.
**Do not hardcode an icon list** — the built-in table evolves with the launcher, so
`listIcons()` / `ICON_NAMES` are the authoritative sources.
### Layout and utilities
```html theme={null}