Airbnb Reviews React component
A guest-review carousel with the Airbnb Bélo mark, aggregate rating header and CTA, above a draggable autoplaying grid of review cards.
About the Airbnb Reviews component
Airbnb Reviews is a free guest-review carousel for hosts: the Airbnb Bélo mark with your overall rating, number of reviews and a feedback button in the header, then a draggable, autoplaying row of review cards with each guest's avatar, name, stay date, stars and comment.
It comes in dark, light and custom themes with Airbnb's coral as the default accent, and marks the reviews up with schema.org microdata.
When to use it
Use it on a direct-booking site for a holiday home, cabin, boutique hotel or property manager, so guests who book outside Airbnb still see the reviews earned there.
Installation
Add the Airbnb Reviews component to your project with the shadcn CLI. It lands in components/airbnb-reviews.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/airbnb-reviewsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<AirbnbReviews /> 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 | "#FF385C" |
| 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 | "Airbnb Reviews" |
| overallRating | number | 4.3 |
| reviewCount | number | 191 |
| showHeader | boolean | true |
| showCTA | boolean | true |
- themeMode"light" | "dark" | "custom"Default: "dark"
- accentColorstringDefault: "#FF385C"
- customBackgroundstringDefault: "#f6f5fb"
- customSurfacestringDefault: "#ffffff"
- customBorderstringDefault: "rgba(30,27,75,0.08)"
- customTextstringDefault: "#1e1b4b"
- customTextMutedstringDefault: "rgba(30,27,75,0.55)"
- badgeTitlestringDefault: "Airbnb 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, Airbnb Reviews included.
Collections
Use-case pages that compare Airbnb Reviews with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Airbnb Reviews FAQ
- Does it import reviews from Airbnb?
- No, you add the guest reviews, overall rating and count yourself; Airbnb has no public API for listing reviews.
- Where should the button link?
- Usually to your listing on Airbnb, so people can read every review there. Set ctaText and ctaLink, or showCTA={false} to hide it.
- Can I match my site's colors instead of Airbnb's?
- Yes. Set accentColor, or themeMode="custom" with your own background, surface, border and text colors.
- Can it stop moving?
- Set autoPlay={false}; it also pauses while hovered.
