Basic
The <StarRating/> component builds on top of the bits-ui <RatingGroup/> component so it has all the behaviors you'd expect.
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Rating is {value}
Installation
jsrepo add ui/star-rating
Usage
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Custom Stars
You can have an arbitrary number of stars.
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Half Rating
You can also have half ratings. And they even work in RTL!
تقييم بالنجوم (RTL)
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Rating is {value}
تقييم بالنجوم (RTL)
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Disabled
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Readonly
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Custom Color
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}
Custom Size
{#snippet children({ items })}
{#each items as item (item.index)}
{/each}
{/snippet}