Testimonials, rating · Klarhimmel UI

Install

npx shadcn add @klarhimmel/testimonials-rating

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import TestimonialsRating from '@/components/klarhimmel/blocks/testimonials-rating';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsRating props={{
          "eyebrow": "Reviews",
          "title": "Guests rate us 4.9 out of 5",
          "score": "4.9",
          "scoreStars": "5",
          "outOf": "out of 5 stars",
          "basis": "from 1,240 verified stays",
          "reviews": [
            {
              "stars": "5",
              "headline": "The best breakfast I have had in years",
              "text": "Quiet room, friendly owner, and a breakfast table that made me stay an extra morning. Booking took a minute.",
              "name": "Karin Å.",
              "when": "Stayed in October"
            },
            {
              "stars": "5",
              "headline": "Exactly as photographed",
              "text": "Rare these days. The room was spotless and the front desk remembered our names on the second morning.",
              "name": "Jonas L.",
              "when": "Stayed in September"
            },
            {
              "stars": "4",
              "headline": "Lovely, but book parking early",
              "text": "Everything else was perfect. The six parking spaces went fast, so ask when you book.",
              "name": "Sara H.",
              "when": "Stayed in August"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/testimonials-rating';

Also called

testimonials/rating

About: A review-site look: a big average score with stars and the review count on the left, two to four star-rated reviews with a headline, text, name and date on the right. Stars are decorative; the rating is read out as "5 out of 5 stars".
Category: What customers say, one quote or many.

Notes

When to use it

A review-site layout: a big average score with stars on the left and two to four star-rated reviews on the right. Use it when you have a real rating; `testimonials-grid` is the better pick for quotes without scores.

Writing for it

- The score (8 characters) is text, such as '4,8', and outOf (30 characters) such as 'out of 5'. The summary stars come from scoreStars, a separate field. - Each review needs a headline (80 characters), a name and stars from 1 to 5. The review text has 280 characters and is optional. - The basis line (80 characters) is where the count and source go, for example 'Based on 214 reviews'. A rating without it is hard to trust.

Watch out for

The star icons are decorative. Screen readers get the review's star number followed by the outOf text, so a score label like 'out of 5 stars' reads as '5 out of 5 stars' and a different wording will read oddly.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import TestimonialsRating from '@/components/klarhimmel/blocks/testimonials-rating';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <TestimonialsRating props={{
          "eyebrow": "Reviews",
          "title": "Guests rate us 4.9 out of 5",
          "score": "4.9",
          "scoreStars": "5",
          "outOf": "out of 5 stars",
          "basis": "from 1,240 verified stays",
          "reviews": [
            {
              "stars": "5",
              "headline": "The best breakfast I have had in years",
              "text": "Quiet room, friendly owner, and a breakfast table that made me stay an extra morning. Booking took a minute.",
              "name": "Karin Å.",
              "when": "Stayed in October"
            },
            {
              "stars": "5",
              "headline": "Exactly as photographed",
              "text": "Rare these days. The room was spotless and the front desk remembered our names on the second morning.",
              "name": "Jonas L.",
              "when": "Stayed in September"
            },
            {
              "stars": "4",
              "headline": "Lovely, but book parking early",
              "text": "Everything else was perfect. The six parking spaces went fast, so ask when you book.",
              "name": "Sara H.",
              "when": "Stayed in August"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Reviews'`	Text, up to 60 characters.
`title`	`string`	`'Guests rate us 4.9 out of 5'`	Text, up to 120 characters.
`score`	`string`	`'4.9'`	Text, up to 8 characters.
`scoreStars`	`'1' \| '2' \| '3' \| '4' \| '5'`	`'5'`	One of '1', '2', '3', '4', '5'.
`outOf`	`string`	`'out of 5 stars'`	Text, up to 30 characters.
`basis`	`string`	`'from 1,240 verified stays'`	Text, up to 80 characters.
`reviews`	`{ stars, headline, text, name, when }[]`	`3 items`	List of 2 to 4. Each item: stars ('1' \| '2' \| '3' \| '4' \| '5'), headline, text, name, when.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.