Service Card Carousel

Feature333: Service Card Carousel

A joined row of square service cards in a carousel, five across on wide screens, each with an icon or a small image, a title and a Details link. The cards can be inverted, use the primary color, sit on the card surface or take any background and text color you pass, and the previous and next buttons sit under the row at the bottom right.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/feature333?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/feature333?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature333.tsx plus the shadcn carousel primitive and embla-carousel-react.

Quick start

The installed file exports feature333Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Feature333, feature333Demo } from "@/components/beste/block/feature333";

export default function Page() {
  return <Feature333 {...feature333Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { HeartPulse, Signpost, Truck } from "lucide-react";
import { Feature333 } from "@/components/beste/block/feature333";

export default function Page() {
  return (
    <Feature333
      items={[
        { title: "Car insurance", href: "/products/car", icon: Signpost },
        { title: "Health insurance", href: "/products/health", icon: HeartPulse },
        { title: "Cargo insurance", href: "/products/cargo", icon: Truck },
        { title: "Home insurance", href: "/products/home", image: { src: "/icons/home.png", alt: "A house" } },
      ]}
      linkLabel="Details"
      colors={{ background: "#1f2340", foreground: "#ffffff" }}
      labels={{ previous: "Previous", next: "Next" }}
    />
  );
}

Props

type ServiceItem = {
  title: string;
  href: string;
  icon?: LucideIcon;
  image?: { src: string; alt: string };
};

Behavior notes

• inverse uses bg-foreground text-background, so the cards flip with the theme, primary uses the primary color pair and card sits on bg-card with a border.
• colors is applied as inline styles and wins over tone. Dividers between cards and the icons follow the text color, so they stay visible on any background you pass.
• A card shows image when it has one and falls back to icon; the image is a 64 pixel square with object-cover.
• The whole card is one link, and on hover the icon gets brighter while the arrow next to the link label slides right.
• The carousel shows 1 card on phones, 2 from sm, 3 from lg and 5 from xl. The arrow buttons scroll one card at a time and are disabled at either end, since the carousel does not loop.
• The arrow buttons always use the primary color pair, under the right edge of the row.