Components / Brand
Dither gem
A cut gem filled with dithered light: the product mark in navigation, lists and empty states.
@fabrials/ui
- Radiantstormlight
- fabrials.comheliodor
- Sylsapphire
- Spanreedruby
- X Trackeremerald
- Fabrials UIzircon
- Newssmokestone
- ai.fabrials.comamethyst
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { DitherGem } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
gem | GemName | The product's gem: stormlight, heliodor, sapphire, ruby, emerald, zircon, smokestone or amethyst. |
size | number | Box size in CSS pixels: 16, 20, 28 or 40 in interfaces, larger beside a hero. |
reveal | number | Large marks only: fills with light once on first paint. |
Behavior
Decorative (aria-hidden). Always pair it with the product name.
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.