Spotlight Card

Fast

Optimized performance with lazy loading and automatic code splitting.

→ Learn more

Modern

A design system built with current UI best practices.

→ Explore

Composable

Modular components that fit together as building blocks.

→ Components

import { Layers, Sparkles, Zap } from "lucide-react";
import {
  SpotlightCard,
  SpotlightCardContent,
  SpotlightCardFooter,
  SpotlightCardHeader,
} from "@/components/matos-ui/spotlight-card";

export function SpotlightCardDemo() {
  return (
    <div className="flex flex-wrap items-start justify-center gap-4">
      <SpotlightCard glow="primary" size="sm">
        <SpotlightCardHeader>
          <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10">
            <Zap className="size-4 text-primary" />
          </div>
        </SpotlightCardHeader>
        <SpotlightCardContent>
          <h3 className="text-sm font-semibold">Fast</h3>
          <p className="mt-1 text-xs text-muted-foreground">
            Optimized performance with lazy loading and automatic code
            splitting.
          </p>
        </SpotlightCardContent>
        <SpotlightCardFooter>
          <span className="text-xs text-muted-foreground">→ Learn more</span>
        </SpotlightCardFooter>
      </SpotlightCard>

      <SpotlightCard glow="accent" size="sm">
        <SpotlightCardHeader>
          <div className="flex size-9 items-center justify-center rounded-lg bg-chart-4/10">
            <Sparkles className="size-4 text-chart-4" />
          </div>
        </SpotlightCardHeader>
        <SpotlightCardContent>
          <h3 className="text-sm font-semibold">Modern</h3>
          <p className="mt-1 text-xs text-muted-foreground">
            A design system built with current UI best practices.
          </p>
        </SpotlightCardContent>
        <SpotlightCardFooter>
          <span className="text-xs text-muted-foreground">→ Explore</span>
        </SpotlightCardFooter>
      </SpotlightCard>

      <SpotlightCard glow="default" size="sm">
        <SpotlightCardHeader>
          <div className="flex size-9 items-center justify-center rounded-lg bg-muted">
            <Layers className="size-4 text-foreground" />
          </div>
        </SpotlightCardHeader>
        <SpotlightCardContent>
          <h3 className="text-sm font-semibold">Composable</h3>
          <p className="mt-1 text-xs text-muted-foreground">
            Modular components that fit together as building blocks.
          </p>
        </SpotlightCardContent>
        <SpotlightCardFooter>
          <span className="text-xs text-muted-foreground">→ Components</span>
        </SpotlightCardFooter>
      </SpotlightCard>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/spotlight-card.json

Usage

import {
  SpotlightCard,
  SpotlightCardHeader,
  SpotlightCardContent,
  SpotlightCardFooter
} from '@/components/matos-ui/spotlight-card'

<SpotlightCard glow="primary">
  <SpotlightCardHeader>
    <h3>Title</h3>
  </SpotlightCardHeader>
  <SpotlightCardContent>
    <p>Card content.</p>
  </SpotlightCardContent>
  <SpotlightCardFooter>
    <span>Footer</span>
  </SpotlightCardFooter>
</SpotlightCard>

Reference

SpotlightCard Props

Prop	Type	Default	Description
`glow`	`"default" \| "primary" \| "accent" \| "destructive"`	`"default"`	Color of the radial light effect.
`size`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Maximum width of the card.
`spotlightSize`	`number`	`350`	Radius in pixels of the spotlight.

Exported Subcomponents

Component	Description
`SpotlightCardHeader`	Header area with standard padding (`px-5 pt-5`).
`SpotlightCardContent`	Main content area (`px-5 py-3`).
`SpotlightCardFooter`	Footer with flex row and gap (`px-5 pb-5`).

Also exported: spotlightCardVariants, spotlightCardHeaderVariants, spotlightCardContentVariants, spotlightCardFooterVariants, and their corresponding prop types.