EngineeringShipping faster with a component registry
How we cut landing page build time from days to hours by treating sections as installable units.
Product Card
-22%Atlas Field Watch
4.8$249$320
-22%A product card with image, price, discount badge, wishlist toggle, and add to cart action for shop grids.
The import and the props worth knowing about, in one place.
import { Card4 } from "@/components/beste/component/card4";
// Image and name link to href; heart and CTA stay independently clickable.
<Card4
src="/products/watch.jpg"
name="Atlas Field Watch"
price="$249"
compareAt="$320" // struck-through original price
badge="-22%" // corner badge
rating={4.8}
href="/products/atlas-field-watch"
onAdd={() => console.log("added to cart")}
onWishlist={(on) => console.log("wishlist", on)}
/>
<Card4
src="/products/lamp.jpg"
name="Dune Desk Lamp"
price="$89"
ctaLabel="Buy now"
tone="primary" // CTA: "dark" (default) | "primary"
onAdd={() => console.log("buy now")}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
-22%import { Card4 } from "@/components/beste/component/card4";
<Card4
src="https://images.unsplash.com/photo-1782231609423-e3cbc454d761?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
name="Atlas Field Watch"
price="$249"
compareAt="$320"
badge="-22%"
rating={4.8}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Product image URL |
name* | string | — | Product name |
price* | string | — | Current price (e.g. "$249") |
compareAt | string | — | Original price, rendered struck through (e.g. "$320") |
badge | string | — | Corner badge (e.g. "New" or "-22%") |
rating | number | — | Rating value shown next to a star (e.g. 4.8) |
href | string | — | If set, the image and name link to this href |
ctaLabel | string | — | CTA label (defaults to "Add to cart") |
onAdd | React.MouseEventHandler<HTMLButtonElement> | — | CTA click handler |
onWishlist | (wishlisted: boolean) => void | — | Called when the wishlist heart is toggled |
tone | "dark" | "primary" | — | CTA tone |
className | string | — | Additional classes merged onto the root |
Orbit One
$189
A product card with a full bleed photo, overlaid name and price, and a floating pill button.
A portrait product teaser card with brand header, availability footer, and a pill button for coming soon pages.
For freelancers shipping client sites.
No credit card required
A complete pricing card with feature list, highlighted state, floating badge, and call to action.
We are opening a short testing window for the new builder. Help shape it before launch.
Only 25 seats
Applications close Jul 18.
A dismissible promo card with image, deadline line, and apply button for programs and offers.
A 3D book cover card that swings open on hover to reveal page edges for ebooks, guides, and lead magnets.
EngineeringHow we cut landing page build time from days to hours by treating sections as installable units.
An article card with cover image, category chip, excerpt, and author row for blog and news grids.