Custom components built on top of the design system
This page documents custom components that extend the base design system.
The StarRating component displays rating values using the design system's ember color palette, replacing emoji-based stars for consistency and accessibility.
import { StarRating } from "@/components/star-rating";
// Display a 4 out of 5 rating
<StarRating value={4} />
// Display with custom max (e.g., 3 stars)
<StarRating value={2} max={3} />
// Display with custom className
<StarRating value={5} className="text-lg" />| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | undefined | ā | Number of filled stars (0ā5) |
max | number | 5 | Total number of stars to render |
className | string | ā | Additional CSS classes |
value is null, undefined, or 0, renders a dash (ā) in muted foreground color0 and max--ember color for filled stars, --muted-foreground for empty starsThis component addresses FINDING-007 from the design audit:
StarIcon instead of emoji (ā)text-ember for filled statetext-muted-foreground/30 for empty statesize-3.5 (14px)fill-ember and fill-transparent// Location: apps/app/src/app/(authenticated)/reports/components/star-rating.tsx