Shadow Card

Renders a 3D-style marketing card with L-shaped extrusion. It includes optional pixel gradient mesh and Radix Slot on the root. Use for visually distinct content displays.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/shadow-card

npx layro-cli add @nolly-studio/shadow-card

npx layro-cli add @nolly-studio/shadow-card

bunx layro-cli add @nolly-studio/shadow-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import type { ComponentProps } from "react"
import { Slot } from "@radix-ui/react-slot"

import { cn } from "@/lib/utils"

/**
 * 3D-style L-shaped extrusion. Renders at z-10; place after backdrops/glow/content
 * in DOM order so it paints on top, or rely on z-10 vs default z-0 layers.
 */
function ShadowCardBevel({
  className,
  barClassName,
  ...props
}: ComponentProps<"div"> & {