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

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.