Etsy Reviews React component
A shop-review carousel with the Etsy wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
About the Etsy Reviews component
Etsy Reviews is a free shop-review carousel: the Etsy wordmark with your shop's overall rating, number of reviews and a feedback button, over a draggable, autoplaying set of review cards showing the buyer, date, stars and review.
It ships dark, light and custom themes with Etsy's orange as the default accent, and adds schema.org microdata to the reviews.
When to use it
Use it on a maker's own website or Shopify store to show the reviews earned on Etsy, where buyers already know and trust the rating.
Installation
Add the Etsy Reviews component to your project with the shadcn CLI. It lands in components/etsy-reviews.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/etsy-reviewsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<EtsyReviews /> accepts 31 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| themeMode | "light" | "dark" | "custom" | "dark" |
| accentColor | string | "#F45800" |
| customBackground | string | "#f6f5fb" |
| customSurface | string | "#ffffff" |
| customBorder | string | "rgba(30,27,75,0.08)" |
| customText | string | "#1e1b4b" |
| customTextMuted | string | "rgba(30,27,75,0.55)" |
| badgeTitle | string | "Etsy Reviews" |
| overallRating | number | 4.3 |
| reviewCount | number | 191 |
| showHeader | boolean | true |
| showCTA | boolean | true |
- themeMode"light" | "dark" | "custom"Default: "dark"
- accentColorstringDefault: "#F45800"
- customBackgroundstringDefault: "#f6f5fb"
- customSurfacestringDefault: "#ffffff"
- customBorderstringDefault: "rgba(30,27,75,0.08)"
- customTextstringDefault: "#1e1b4b"
- customTextMutedstringDefault: "rgba(30,27,75,0.55)"
- badgeTitlestringDefault: "Etsy Reviews"
- overallRatingnumberDefault: 4.3
- reviewCountnumberDefault: 191
- showHeaderbooleanDefault: true
- showCTAbooleanDefault: true
Show all 61 propsShow fewer
| ctaText | string | "Share your feedback" |
| ctaLink | string | "" |
| showArrows | boolean | true |
| logoSize | number | 22 |
| reviews | { avatar?: string | null; name: string; date: string; rating: number; text: string }[] | DEFAULT_REVIEWS |
| cardsDesktop | number | 3 |
| autoPlay | boolean | true |
| autoPlaySpeed | number | 5 |
| gap | number | TOKENS.gapDefault |
| sectionGap | number | 16 |
| cardRadius | number | 20 |
| paddingTop | number | 56 |
| paddingBottom | number | 56 |
| paddingHorizontal | number | 24 |
| titleFont | object | — |
| titleFont.fontFamily | string | — |
| titleFont.fontWeight | string | number | — |
| titleFont.fontStyle | string | — |
| titleFont.fontSize | number | string | — |
| titleFont.lineHeight | number | string | — |
| titleFont.letterSpacing | number | string | — |
| reviewTextFont | object | — |
| reviewTextFont.fontFamily | string | — |
| reviewTextFont.fontWeight | string | number | — |
| reviewTextFont.fontStyle | string | — |
| reviewTextFont.fontSize | number | string | — |
| reviewTextFont.lineHeight | number | string | — |
| reviewTextFont.letterSpacing | number | string | — |
| reviewerNameFont | object | — |
| reviewerNameFont.fontFamily | string | — |
| reviewerNameFont.fontWeight | string | number | — |
| reviewerNameFont.fontStyle | string | — |
| reviewerNameFont.fontSize | number | string | — |
| reviewerNameFont.lineHeight | number | string | — |
| reviewerNameFont.letterSpacing | number | string | — |
| metaFont | object | — |
| metaFont.fontFamily | string | — |
| metaFont.fontWeight | string | number | — |
| metaFont.fontStyle | string | — |
| metaFont.fontSize | number | string | — |
| metaFont.lineHeight | number | string | — |
| metaFont.letterSpacing | number | string | — |
| ctaFont | object | — |
| ctaFont.fontFamily | string | — |
| ctaFont.fontWeight | string | number | — |
| ctaFont.fontStyle | string | — |
| ctaFont.fontSize | number | string | — |
| ctaFont.lineHeight | number | string | — |
| ctaFont.letterSpacing | number | string | — |
- ctaTextstringDefault: "Share your feedback"
- ctaLinkstringDefault: ""
- showArrowsbooleanDefault: true
- logoSizenumberDefault: 22
- reviews{ avatar?: string | null; name: string; date: string; rating: number; text: string }[]Default: DEFAULT_REVIEWS
- cardsDesktopnumberDefault: 3
- autoPlaybooleanDefault: true
- autoPlaySpeednumberDefault: 5
- gapnumberDefault: TOKENS.gapDefault
- sectionGapnumberDefault: 16
- cardRadiusnumberDefault: 20
- paddingTopnumberDefault: 56
- paddingBottomnumberDefault: 56
- paddingHorizontalnumberDefault: 24
- titleFontobject
- titleFont.fontFamilystring
- titleFont.fontWeightstring | number
- titleFont.fontStylestring
- titleFont.fontSizenumber | string
- titleFont.lineHeightnumber | string
- titleFont.letterSpacingnumber | string
- reviewTextFontobject
- reviewTextFont.fontFamilystring
- reviewTextFont.fontWeightstring | number
- reviewTextFont.fontStylestring
- reviewTextFont.fontSizenumber | string
- reviewTextFont.lineHeightnumber | string
- reviewTextFont.letterSpacingnumber | string
- reviewerNameFontobject
- reviewerNameFont.fontFamilystring
- reviewerNameFont.fontWeightstring | number
- reviewerNameFont.fontStylestring
- reviewerNameFont.fontSizenumber | string
- reviewerNameFont.lineHeightnumber | string
- reviewerNameFont.letterSpacingnumber | string
- metaFontobject
- metaFont.fontFamilystring
- metaFont.fontWeightstring | number
- metaFont.fontStylestring
- metaFont.fontSizenumber | string
- metaFont.lineHeightnumber | string
- metaFont.letterSpacingnumber | string
- ctaFontobject
- ctaFont.fontFamilystring
- ctaFont.fontWeightstring | number
- ctaFont.fontStylestring
- ctaFont.fontSizenumber | string
- ctaFont.lineHeightnumber | string
- ctaFont.letterSpacingnumber | string
Kits
Sets of components designed to be used together on one site, Etsy Reviews included.
Collections
Use-case pages that compare Etsy Reviews with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Etsy Reviews FAQ
- Can it fetch my Etsy reviews?
- Not by itself. Pass the reviews as props, copied in or fetched on your server with the Etsy Open API.
- Where should the button go?
- To your shop's reviews on Etsy; set ctaLink, or hide it with showCTA={false}.
- How many reviews should I show?
- Six to twelve recent ones work well; the carousel shows cardsDesktop at a time and scrolls through the rest.
- Can I change the fonts?
- Yes, titleFont, reviewTextFont, reviewerNameFont, metaFont and ctaFont each take a font family, weight and style.
