# antuikit / Rate

> Rate with the star drawn from your icon pack, at the filled weight, and the `tooltips` drawn as the kit's small Tooltip.

Docs: https://antuikit.com/docs/components/rate

## Install

npx antuikit@latest init
npx antuikit@latest add rate

## Import

import { Rate } from "@/components/ui/rate";

## Demos

- [Basic](https://ui.antuikit.com/embed/rate/basic.md): A `Rate` with a `defaultValue` of 3 shows five stars with three filled, and a click on any star changes the score.
- [Count](https://ui.antuikit.com/embed/rate/count.md): Set `count` to change how many stars the scale has, like 10 for a score out of ten.
- [Half](https://ui.antuikit.com/embed/rate/half.md): Add `allowHalf` so a click on the left half of a star picks a half step, like 2.5 out of 5.
- [Size](https://ui.antuikit.com/embed/rate/custom-size.md): Set `size` to `small`, `medium` or `large`, or give the Rate a larger font size to scale the stars past large.
- [Read only](https://ui.antuikit.com/embed/rate/read-only.md): Pass `disabled` to show a score people cannot change, and add `allowHalf` for half values like 3.5.
- [Clear](https://ui.antuikit.com/embed/rate/clear.md): Clicking the selected star again resets the rating to 0, and `allowClear={false}` turns that off for a rating that must stay set.
- [With text](https://ui.antuikit.com/embed/rate/with-text.md): Pass `tooltips` a word per star and show the word for the current score beside the stars, from Terrible to Wonderful.
- [Tooltip objects](https://ui.antuikit.com/embed/rate/tooltip-objects.md): Pass `tooltips` objects instead of strings to give each star its own tooltip `title` and `color`, like red for low protection.
- [Custom character](https://ui.antuikit.com/embed/rate/custom-character.md): Pass any node as `character` to replace the star, like a check icon or the letter A.
- [Emoji reaction](https://ui.antuikit.com/embed/rate/emoji-reaction.md): Return an emoji per `index` from `character` for a five-step reaction scale, and dim the unselected ones with a class since emoji keep their own color.
- [In a form](https://ui.antuikit.com/embed/rate/in-form.md): Put Rate in a `Form.Item` with a `required` rule, and label each star with `tooltips` from Terrible to Wonderful.
- [Category ratings](https://ui.antuikit.com/embed/rate/category-ratings.md): A review breakdown with a small read-only score per category, like cleanliness, accuracy and location.
- [Review summary](https://ui.antuikit.com/embed/rate/review-summary.md): An average score above its rating count, beside a bar per star level that shows how the reviews split.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/rate`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Rate` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.