Star rating is a way to give a rating to the content to show its quality or performance in different fields.
Use this example of the component to show the given review. The rating is not editable
Jane Lane
Use this example of the component to give rating base on criteria
Run the following command to add this component to your project:
npx base-ui-cli add star-rating
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add star-rating
// Paths are relative to aliases.components (default: src/app/components)
import { StarRatingComponent } from './star-rating/star-rating.component';
import { StarComponent } from './star-rating/star/star.component';
@Component({
selector: 'app-your-component',
imports: [
StarComponent,
StarRatingComponent
],
template: `...`
})
export class YourComponent {} API for star-rating — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-star | rating | number | 0 | The rating input property. |
base-star | editable | boolean | false | The editable input property. |
base-star | (ratingChanged) | number | — | The ratingChanged output property. |
base-star-rating | ariaLabel | unknown | 'Rating' | Accessible label for the star rating group. |
Content