Card

Translucent dark panel with an optional title, blurred over whatever sits behind it.

npx bezel-add add card

About

A frosted glass card component for React: a rounded, translucent panel with a backdrop blur that lets the background show through softly. Use it to group content on dark pages, dashboards or image-backed sections. It stays deliberately small, with an optional heading and softened body text, so it drops into any layout without fighting your styles.

Key props: title (optional heading rendered above the content), children (panel body), className (extra classes for spacing or width)

packages/ui/src/Card.tsx · 18 lines

import React from "react";

interface CardProps {
  title?: string;
  children: React.ReactNode;
  className?: string;
}

export function Card({ title, children, className = "" }: CardProps) {
  return (
    <div
      className={`rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-6 shadow-md ${className}`}
    >
      {title && <h3 className="text-lg font-semibold text-white mb-3">{title}</h3>}
      <div className="text-white/80">{children}</div>
    </div>
  );
}