eBay Reviews React component
A seller-feedback carousel with the eBay wordmark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
About the eBay Reviews component
eBay Reviews is a free seller-feedback carousel: the eBay wordmark, your overall rating and feedback count, and a feedback button in the header, above a draggable, autoplaying row of buyer feedback cards with name, date, stars and comment.
Dark, light and custom themes, the accent color and fonts are props, and the feedback is marked up with schema.org microdata.
When to use it
Use it on the own website or store of an eBay seller, to carry their eBay reputation over to direct sales.
Installation
Add the eBay Reviews component to your project with the shadcn CLI. It lands in components/ebay-reviews.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ebay-reviewsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<EbayReviews /> 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 | "#0968F6" |
| 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 | "eBay Reviews" |
| overallRating | number | 4.3 |
| reviewCount | number | 191 |
| showHeader | boolean | true |
| showCTA | boolean | true |
- themeMode"light" | "dark" | "custom"Default: "dark"
- accentColorstringDefault: "#0968F6"
- customBackgroundstringDefault: "#f6f5fb"
- customSurfacestringDefault: "#ffffff"
- customBorderstringDefault: "rgba(30,27,75,0.08)"
- customTextstringDefault: "#1e1b4b"
- customTextMutedstringDefault: "rgba(30,27,75,0.55)"
- badgeTitlestringDefault: "eBay 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, eBay Reviews included.
Collections
Use-case pages that compare eBay Reviews with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
eBay Reviews FAQ
- Does it pull my eBay feedback automatically?
- No, you pass the feedback entries, rating and count as props.
- What should the button link to?
- Your eBay feedback profile, so buyers can see the full history; set ctaLink and ctaText.
- eBay feedback isn't in stars. What rating should I use?
- Use the stars for detailed seller ratings, or convert positive feedback to a 5-point scale honestly; the overall rating shown is whatever you pass.
- Can I use my brand color?
- Yes, set accentColor or use themeMode="custom".
