The star collection contains standalone SVG components. Browse every shape on the Stars page, then install only the item you need.
npx shadcn@latest add @neobrutal-ui/s1Each star is copied into components/stars and accepts standard SVG attributes.
#Component Props
| Name | Description | Type |
|---|---|---|
| color | Star color | string |
| size | Width and height of star in pixels | number |
| stroke | Path stroke color | string |
| strokeWidth | Stroke width | number |
| pathClassName | Path classname | string |
If color is omitted, the component uses currentColor.
The remaining props extend React.SVGProps, including className, dimensions, and ARIA
attributes.
#Examples
#Default
import Star8 from "@/components/stars/s8";
export default function StarDefault() {
return <Star8 color="red" size={200} />;
}
#With stroke
import Star8 from "@/components/stars/s8";
export default function StarWithStroke() {
return <Star8 color="red" size={200} stroke="black" strokeWidth={2} />;
}
#Custom width and height
import Star8 from "@/components/stars/s8";
export default function StarCustomWidthHeight() {
return <Star8 color="red" width={180} height={210} stroke="black" strokeWidth={2} />;
}
#Dark mode color
import Star8 from "@/components/stars/s8";
export default function StarDarkMode() {
return (
<Star8 className="text-red-500 dark:text-blue-500" size={200} stroke="black" strokeWidth={2} />
);
}
#Dark mode stroke color
import Star8 from "@/components/stars/s8";
export default function StarDarkModeStroke() {
return (
<Star8
className="text-red-500 dark:text-blue-500"
pathClassName="stroke-black dark:stroke-white"
size={200}
strokeWidth={2}
/>
);
}