Skip to content
DOL Studio

Rate

Design: Stable Code: Coded formratingstars 2 Figma sets Rate/Rate item

Live preview

Interactive — half-step

Hover left/right half of an icon. ArrowLeft/Right ±0.5 · Home / End jumps to bounds.
3.5/5
Current value: 3.5/5 · half-step enabled

5 sizes — xs / sm / md / lg / xl

Star size scales 12-24px. Auto-fit grid: cellMinWidth=180px.
size="xs"
size="sm"
size="md"
size="lg"
size="xl"

Heart shape — brand tint

2/5
shape="heart" · interactive · current value: 2/5

States

3 states — read-only · disabled · whole-step-only. Auto-fit grid: cellMinWidth=220px.
readOnly
disabled
allowHalf={false}

Import & files

Import
import { Rate } from "@dol/ui/rate";
Source file
packages/@dol/ui/src/rate/Rate.tsx

Figma source

Figma source 2 sets
Page
Rate
Sets
2
Primary set
Rate/Rate item · 48 variants Open in Figma →
Showing: Rate/Rate item
1 other set
  • Rate/Stars group 22 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Rate
Slug: `rate`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Star-rating control - single rate item + stars group.


## Import
```ts
import { Rate } from "@dol/ui/rate";
```
Source: `packages/@dol/ui/src/rate/Rate.tsx`


## Figma source
Page: Rate
Sets: 2
Primary: Rate/Rate item
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=2991-16663

Related

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    Coded
  • Label

    Checkbox

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).