103 Pro components and page blocks

Get Pro
uibrik

Rating Feedback

Pro

Preview

Customize

Threshold3
Color
Width340px

Installation

Pro

Rating Feedback is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/rating-feedback

Usage

import { RatingFeedback } from "@/components/uibrik/rating-feedback/rating-feedback";​const tags = ["Too slow", "Confusing", "Buggy", "Missing a feature"];​<RatingFeedback  threshold={3}  label="Rate this"  lowPrompt="What could be better?"  tags={tags}  thanksLabel="Thanks for the feedback"  color="#f5a524"  width={340}  defaultRating={0}  labels={["Terrible", "Poor", "Okay", "Good", "Great"]}  placeholder="Anything else?"  submitLabel="Send feedback"  reviewPrompt="Glad you liked it. Mind leaving a review?"  reviewLabel="Write a review"  dismissLabel="Not now"  reviewPlaceholder="What did you like?"  postLabel="Post review"  backLabel="Back"  onSubmit={(feedback) => {}}  // rating={0}  // onRatingChange={(rating) => {}}/>

Props

RatingFeedback
threshold
Type number
3
Ratings at or below this ask what went wrong; above it, ask for a review.
label
Type string
"Rate this"
Shown beside the stars before a rating.
lowPrompt
Type string
"What could be better?"
Question above the reasons on a low rating.
tags
Type string[]
–
Quick reasons offered on a low rating.
thanksLabel
Type string
"Thanks for the feedback"
Text of the pill it folds into once sent. Clicking the pill reopens the card.
color
Type string
"#f5a524"
Star colour.
width
Type number
340
Width of the open card in px; never wider than its container.
rating / onRatingChange
Type number / (rating) => void
–
Controlled rating, 0 for none.
defaultRating
Type number
0
Rating on mount when uncontrolled.
onSubmit
Type (feedback: { rating, tags, comment }) => void | Promise
–
Called when feedback is sent, from either path; comment is the note on a low rating or the written review on a high one. Return a promise to hold the button in a sending state; a rejection keeps the card open.
labels
Type string[]
["Terrible", "Poor", "Okay", "Good", "Great"]
One word per star, shown as the pointer moves along them.
placeholder / submitLabel
Type string
–
Note placeholder and send button text.
reviewPrompt / reviewLabel / dismissLabel
Type string
–
Copy on the high-rating path. The review action opens a review box in the card.
reviewPlaceholder / postLabel / backLabel
Type string
–
Copy of the review box.
className
Type string
–
Classes for the wrapper.