Components
Liquid rating
Stars that fill with liquid. Light pours from one star into the next with a wobbling front, overshoots a touch and settles; hovering previews the level.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidRating } from '@vizzele/react';
<LiquidRating value={rating} onChange={setRating} />
<LiquidRating value={4.5} step={0.5} readOnly label="Average" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue / onChange | number | — | Controlled or not. |
max | number | 5 | Stars. |
step | number | 1 | 1 or 0.5. |
readOnly | boolean | — | Display only (an image with a text name). |
size | number | 32 | Star size (px). |
Accessibility
- A slider: arrows change it, Home/End jump, and it reads "3 of 5 stars".
- Read-only ratings are an image named "Rating: 4.5 of 5 stars".