Skip to content
Get Pro
Forms, new

Shard Rating

A rating input whose glyphs are cut glass.

$149 once · every Pro piece

Customize

Each lights from inside up to the value, halves included; hover previews with a short stagger and a press sends a light catch across the glass. Shard, star, heart and dot presets, any SVG shape, or your own renderer through the glyph prop.

Install

npx shadcn@latest add @obsyde/shard-rating

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ShardRating } from '@/components/obsyde/ember/shard-rating/ShardRating';

export function Example() {
  return (
    <ShardRating />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/shard-rating/ShardRating.tsxcomponent
  • ember/shard-rating/shard-rating.cssstyles
  • ember/shard-rating/ShardRatingDemo.tsxdemo
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
glyphGlyph'shard' | 'star' | 'heart' | 'dot''shard'
halfHalf stepsbooleantrue
sizeSize'sm' | 'md' | 'lg''lg'
readOnlyRead onlybooleanfalse