Rate installs into your project as a file you own. It takes the same props as Ant Design's Rate and changes one default: the star comes from your icon pack, at the filled weight.
Install
npx antuikit@latest init
npx antuikit@latest add rate
The first command sets up AntuikitProvider and the theme tokens, and the second adds Rate.
Import
Import from @/components/ui/rate, not from antd. Once installed, the file lives in your project.
import { Rate } from "@/components/ui/rate"
The axes
Three props set the glyph size, how many glyphs there are and how finely the value moves.
size takes small, medium or large and sets the glyph's font size. Unset, it follows the provider. middle is the old name for medium and is deprecated.
count is how many glyphs are drawn, 5 by default. Screen readers announce each star against it.
value with onChange, or defaultValue, holds the score: 0 to count in whole steps, or in halves with allowHalf.
direction comes from the provider. In RTL the fill runs the other way and the arrow keys swap.
Flags
Five booleans. Two of them default to true.
allowClear defaults to true: a second click on the selected star resets the value to 0. Pass false when the field is required.
allowHalf defaults to false. When on, a click on the left half of a star picks the half step, and the glyph is clipped at half width, so it has to be roughly square.
disabled is the read-only mode. When you do not pass it, a disabled Form above the Rate disables it too.
keyboard defaults to true and turns the arrow keys on. Turning it off keeps the tab stops, which leaves a focusable control that does nothing.
autoFocus focuses the root on mount, and is ignored while disabled.
Slots
Rate has no children. Everything it draws comes through three props.
character is the glyph: any node, or a function ({ index }) => node for per-position faces and letter grades.
One character is drawn in every position, and the unselected ones are grayed out. A glyph with its own color stays colored, and one that is not roughly square breaks the half step.
character={null} draws nothing.
characterRender wraps each star. Rate uses it to attach tooltips, so passing your own replaces the tooltips.
tooltips takes one entry per star: a string, or a tooltip props object. Define the array outside the component so a render does not rebuild every tooltip.
Events
onChange fires on a click, on Enter over a star and on every arrow key step. onHoverChange fires with the value under the pointer, and with undefined when it leaves. Use it for a label like “4 stars: Good” beside the control. onFocus, onBlur and onKeyDown are on the root and do not fire while disabled.
Styling
Rate has no classNames or styles keys, so reach its parts with a descendant selector on its classes, like [&_.ant-rate-star-zero] for the unselected stars. className and style land on the root.
API Reference
Rate
Rate's props. Rows marked antuikit in the Version column are added by the kit.