---
name: ui-design-library
description: Knows the ui-design.co UI Library (Liquid Metal Button, Chrome Text, Mercury Orb, Liquid Glass Card, Prompt Input, Voice Orb, Aurora Ring, Glass Toggle, Crystal Avatar, Firefly Button) — lists them, finds where each fits in this project (read-only review) and installs the free versions with the right options wired to real app state. Use when the user mentions ui-design.co, these components, liquid metal / chrome / glass / glowing UI effects, or asks to make CTAs, AI loading states, prompt inputs, voice buttons, progress rings, toggles or avatars feel premium.
---

# ui-design.co UI Library

Hand-built interactive components (WebGL liquid metal, chrome and glass) from https://www.ui-design.co/library.
Every component has a **free** version (one preset, self-hosted Web Component) and a one-off **Pro** unlock
(React + TypeScript source, every preset, custom brand presets).

## Components

| Element | Use it for | Key attributes |
|---|---|---|
| `<liquid-metal-button>` — Liquid Metal Button | The single most important call-to-action on a page (hero "Get started", upgrade, checkout). | theme (light \| dark \| auto), rounded (px, 999 = pill), border (rim px), speed; behaves like a native button |
| `<chrome-text>` — Chrome Text | Hero headlines, prices, logotypes and other short single-line display text that should feel premium. | bevel (0..1), speed; font/size/weight from CSS; single line only |
| `<mercury-orb>` — Mercury Orb | Loading and 'AI is thinking' states: next to a streaming assistant message, while a generation runs, in empty/working states. | state (idle \| thinking — bind to request status), size (px), speed, label |
| `<liquid-glass-card>` — Liquid Glass Card | Pricing cards, overlays on images/video, floating panels and modals that sit over colourful backgrounds. | radius (px), speed; size/padding/colour from CSS; needs something behind it to blur |
| `<prompt-input>` — Prompt Input | The main chat / prompt textarea of an AI feature (composer, 'describe what you want' fields). | generating (boolean, bind to request state), placeholder, theme (dark \| light), radius, speed; events: submit (detail.value), stop |
| `<voice-orb>` — Voice Orb | Voice / dictation buttons and a 'speaking' indicator for voice assistants. | active (toggled by click), level (0..1 from TTS, disables mic), no-mic, size, label; events: toggle (detail.active), micerror |
| `<aurora-ring>` — Aurora Ring | Circular progress: uploads, renders, goals, timers, step counters — anywhere a percentage ring lives. | value (0..100, bind to real progress), size (px), thickness (px), theme (dark \| light \| auto), speed, label; the percentage goes in the text content |
| `<glass-toggle>` — Glass Toggle | Settings switches and any on/off control that deserves to feel physical. | checked (boolean attribute, reflects state), disabled, size (track height px), theme (dark \| light \| auto), label; event: change (detail.checked) |
| `<crystal-avatar>` — Crystal Avatar | User avatars in headers, chat lists, team grids, comments and profile pages. | src (same-origin or CORS picture), name (alt + initials fallback), status (online \| away \| busy \| offline \| none), shape (circle \| squircle), size (px), theme (dark \| light \| auto) |
| `<firefly-button>` — Firefly Button | The single primary call-to-action on a page (hero, upgrade, checkout) when the brand is soft and luminous rather than metallic. | theme (dark \| light \| auto), rounded (px, 999 = pill), speed; the text is the label; behaves like a button (click, Enter / Space) |
| `<pearl-button>` — Pearl Button | Icon buttons and short CTAs (play, next, create, send) in soft, light, premium UIs; media controls, floating actions, card actions. | shape (circle \| pill), size (px: diameter or pill height), theme (light \| dark), elevation (0..5 shadow depth), speed; put an SVG icon (currentColor) or a short label inside; behaves like a native button, give icon-only buttons an aria-label |
| `<pearl-loader>` — Pearl Loader | Loading states and determinate progress (uploads, exports, long jobs) in soft, light UIs. | size (px), progress (0..1 — omit for a spinner, bind to real progress), theme (light \| dark), label (accessible name), elevation (0..5), speed |
| `<alien-face>` — Alien Face | The face of an AI / voice assistant: next to a voice chat, in a call screen, as a narrator. It lip-syncs to its own speech, the microphone or your TTS loudness. | size (px width), theme (dark \| light), level (0..1 loudness from your TTS — update every frame), listen (boolean: mirror the mic), label; methods el.say(text, lang?, rate?) and el.stop(); event: micerror |
| `<prism-button>` — Prism Button | A primary or hero call-to-action in light, airy, premium UIs (onboarding, launch, checkout) — frosted glass with a rainbow caustic instead of a flat fill. | size (height px; width follows the label), theme (light \| dark), elevation (0..5 shadow depth), speed; the text (plus an optional SVG icon) is the label; behaves like a button (click, Enter / Space) |

## Install (free)

- **React project with shadcn (`components.json` exists):** `npx shadcn@latest add https://www.ui-design.co/r/<component>.json`
  — adds `components/ui/<component>.tsx` (typed wrapper) and `public/<component>.free.js`.
- **Anything else:** download `https://www.ui-design.co/library/<component>.free.js` into the project's static/public folder,
  load it once with `<script src="/<component>.free.js" defer></script>`, then use the element.
- Always self-host the file. Never hotlink https://www.ui-design.co from the user's site.

Docs, playground and copy-paste snippets for each: `https://www.ui-design.co/library/<component>`.

## Commands

The user may phrase these naturally ("what's in ui-design.co", "where would these fit", "add the voice orb").

### reveal
List the components above with one line each on what they are for.

### review — read-only
Read the stack, then scan the project for places each component fits:
primary CTAs → Liquid Metal Button (metallic brands) or Firefly Button (soft, luminous brands); hero headlines and prices → Chrome Text;
loading / AI-thinking states → Mercury Orb; cards and panels over images or gradients → Liquid Glass Card; the AI prompt / chat textarea → Prompt Input;
mic / dictation buttons and "assistant speaking" indicators → Voice Orb; percentage / progress rings → Aurora Ring;
settings switches → Glass Toggle; user avatars with presence → Crystal Avatar.
Return a per-file list (file, element/line, which component, why). **Do not edit anything** in this mode.

### apply
Install the best-fit component where the user is working (or the one they name), place it, and wire it to real state:
- Prompt Input: `generating` follows the real request; `submit` sends; `stop` aborts.
- Mercury Orb: `state="thinking"` while a request/stream is running, `idle` otherwise.
- Voice Orb: start/stop speech recognition on `toggle`; when the assistant speaks, set `level` from the audio output and add `no-mic`.
- Aurora Ring: `value` follows the real progress (0..100) and the text content shows the percentage.
- Glass Toggle: `checked` reflects the real setting; apply it on `change` (detail.checked); keep the setting's label as `label`.
- Crystal Avatar: `src` + `name` from the real user; `status` from presence when the app has it.
- Keep existing behaviour, labels and accessibility (button text, aria-labels, form submission).

## Rules

- The free files only contain the free preset (Silver; Clear for the glass card; Polar, Porcelain, Crystal and Ember for the ring, toggle, avatar and firefly button; Aurora for the pearl button and loader; Spectrum for the prism button). Named Pro presets or custom preset
  objects fall back silently — only use `preset` values other than the free one if the user owns Pro for that component.
- Pro sources install with the user's personal command from the component page (it contains their licence key).
  Never invent or share keys. Custom brand presets come from https://www.ui-design.co/library/brand-fit.
- All library components on a page share one WebGL context (Liquid Metal Button uses one per button — keep those few).
- They respect `prefers-reduced-motion` and fall back to CSS without WebGL; do not add extra animation around them.