# Star Rating

## Example

```svelte
<script lang="ts">
	import { StarRating } from '@foxui/all';
</script>

<div class="flex h-full w-full items-center justify-center">
	<StarRating rating={4} changeable />
</div>
```

## Documentation

## Usage

```svelte
<StarRating rating={4} changeable />
```

## API Reference

### StarRating
An interactive star rating component with customizable appearance.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| rating | `number` | `-` | The current rating value (0-5). (required, bindable) |
| changeable | `boolean` | `true` | Whether the user can change the rating by clicking. |
| size | `string` | `'size-8'` | Tailwind size class for the stars. |
| strokeWidth | `number` | `0.8` | The stroke width of the star SVG outlines. |
| buttonClasses | `string` | `-` | Additional CSS classes for each star button. |
| svgClasses | `string` | `-` | Additional CSS classes for each star SVG. |
| class | `string` | `-` | Additional CSS classes to apply to the container. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |