DocseffectsSpotlight card

Spotlight card

The plain Calamansi surface as a card, in white or the Calamansi, Slate and Citrus palettes.

Palette
Calamansi

Rind

The branded surface

Squircle

One flat surface, clipped to the Calamansi squircle — a superellipse, not a border radius.

Flesh

Reads in both themes

Themed

White in light mode, near-black in dark, and each tinted palette carries the ink that sits on it.

Pick a palette — the surface stays flat and the corner stays the constant. Pass a different cornerRadius to tighten the curve.

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/spotlight-card

How to use

demo.tsx
import { SpotlightCard } from "@/components/ui/spotlight-card"
import { Leaf } from "lucide-react"
export function Demo() {
  return (
    <SpotlightCard
      className="max-w-sm"
      icon={<Leaf className="size-5" />}
      title="Rind"
      subtitle="The branded surface"
    >
      <p className="text-sm text-muted-foreground">
        One flat surface, clipped to the Calamansi squircle.
      </p>
    </SpotlightCard>
  )
}

Props

Options you can pass to customize this component.

  • titleoptional
    ReactNode

    Title displayed in the header.

  • subtitleoptional
    ReactNode

    Subtitle or description shown under the title.

  • iconoptional
    ReactNode

    Icon displayed alongside the title in the header.

  • badgeoptional
    ReactNode

    Badge or element displayed at the top right.

  • headeroptional
    ReactNode

    Custom header element replacing the default title row.

  • childrenoptional
    ReactNode

    Content drawn inside the squircle.

  • cornerRadiusoptional
    number

    Corner radius of the squircle, in pixels.

  • cornerSmoothingoptional
    number

    Corner smoothing, from 0 (a rounded rectangle) to 1 (a full superellipse).

  • variantoptional
    whitecalamansislatecitrus

    Surface palette. Calamansi by default; White is white in light mode and near-black in dark, and the tinted palettes carry their own ink.

  • classNameoptional
    string

    Extra classes merged onto the card.

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousCalamansi mascot
NextTilt card