H
UI by hampton.io
ComponentsBlocksLayoutsBlog
Get Started
Menu
ComponentsBlocksLayoutsBlog
Get Started
Components
All Components(328)
Categories
Address InputAutocomplete AddressAvatar UploadCharacter CounterCheckboxCheckbox GroupClipboard PasteColor PickerComboboxCombobox MultiCredit Card InputCurrency InputDate PickerDate Range PickerDate Time PickerFeedback FormFile DropzoneFile UploadFloating InputForm FieldForm StepperGlow InputInline EditInputLabelMasked InputMulti SelectOTP InputPassword InputPhone InputPin InputPopover FormRadioRadio GroupRange SliderRatingRating InputRich Text EditorRich Text InputSearch AutocompleteSearch FormSearch InputSearchable SelectSelectSignature PadSlider MarksSlider RangeTag InputTags InputTextareaTime PickerToggle Group
All Components(328)
Categories
Address InputAutocomplete AddressAvatar UploadCharacter CounterCheckboxCheckbox GroupClipboard PasteColor PickerComboboxCombobox MultiCredit Card InputCurrency InputDate PickerDate Range PickerDate Time PickerFeedback FormFile DropzoneFile UploadFloating InputForm FieldForm StepperGlow InputInline EditInputLabelMasked InputMulti SelectOTP InputPassword InputPhone InputPin InputPopover FormRadioRadio GroupRange SliderRatingRating InputRich Text EditorRich Text InputSearch AutocompleteSearch FormSearch InputSearchable SelectSelectSignature PadSlider MarksSlider RangeTag InputTags InputTextareaTime PickerToggle Group
Back to Components
Inputs

Rating

Star rating input for capturing user ratings.

PropsUsage ExampleVariations

Selected rating: 3.5

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/rating.tsx

Installation

Using shadcn CLI

npx shadcn add rating --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Inputs Components

Address Input

Multi-field address form for street, city, region, postal code, and country.

Autocomplete Address

Address input with suggestions and structured output for street, city, state, and postal code.

Avatar Upload

Circular avatar with upload overlay, drag and drop support, and image preview.

Character Counter

Textarea with live character count, limit enforcement, and warning states.

Checkbox

A styled checkbox component with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.

Checkbox Group

Checkbox list with optional select all toggle and indeterminate support.

H
UI by hampton.io

Beautiful shadcn/ui components, crafted weekly by the team at Hampton.io.

Library

  • Components
  • Blocks
  • Layouts
  • Blog

Resources

  • shadcn/ui
  • Tailwind CSS
  • Next.js

Hampton.io

  • About Us
  • Contact
  • Services

© 2026 Hampton.io. All rights reserved.

|

Open source under the MIT License

H
Made by hampton.io