Components / AI providers
Provider icon
The mark of an AI provider or coding agent.
@fabrials/ai-ui
- openai
- anthropic
- xai
- cursor
- github
- nous
- zai
Installation
Import the control from
@fabrials/ai-ui, after setting the app up.TypeScript import { ProviderIcon, providerBrand } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";
API reference
| Prop / export | Type | Description |
|---|---|---|
provider | string | openai, anthropic, xai, cursor, github, nous and more; aliases such as codex, claude and grok resolve. |
size | number | CSS pixels, 24 by default. |
Behavior
Third-party marks keep their own colours and shapes. Unknown providers fall back to a neutral tile.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.