Spotlight Feature Card

Ship in minutes

Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.

Learn more

About this component

A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.

Usage

The import and the props worth knowing about, in one place.

import { Card1 } from "@/components/beste/component/card1";
import { Rocket } from "lucide-react";

// The whole card becomes a link when href is set.
<Card1
  title="Ship in minutes"
  description="Copy a block, wire up your content, and deploy."
  href="/docs"
/>

<Card1
  icon={Rocket}         // tile icon (default: Zap)
  title="Fast by default"
  description="Server components and zero runtime dependencies."
  linkLabel="Read the docs"
  tone="foreground"     // "primary" (default) | "foreground"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`icon`	`LucideIcon`	—	Icon in the leading tile (defaults to Zap)
`title`*	`string`	—	Card title
`description`*	`string`	—	Card body text
`href`	`string`	—	If set, the whole card links to this href and shows the link row
`linkLabel`	`string`	—	Link row label (defaults to "Learn more")
`tone`	`"primary" \| "foreground"`	—	Icon and spotlight hue
`className`	`string`	—	Additional classes merged onto the root