SnowballSH Foundation UI

Panel

Pick a framework. Both use the same recipe, so the styling matches exactly.

flat

Sharp boundary, floating feel.

raised

Sharp boundary, floating feel.

glass

Sharp boundary, floating feel.

Interactive

The whole card is one link: it lifts on hover, shows a pointer, and rings on keyboard focus.

Panel props for React
PropTypeDefaultDescription
tier"flat" | "raised" | "glass"glassSurface material.
padding"none" | "md" | "lg"mdInner spacing.
interactivebooleanfalseHover lift, pointer cursor, and a focus ring for panels that act as links; pair with a full-card anchor.

Also takes className and children. Anything else passes through to the div.

panel.demo.tsx
import { Panel } from "../react/index.js";

const tiers = ["flat", "raised", "glass"] as const;

export default function PanelDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="grid gap-4 sm:grid-cols-3">
        {tiers.map((tier) => (
          <Panel key={tier} tier={tier}>
            <p className="font-medium">{tier}</p>
            <p className="text-sm text-ink-secondary">
              Sharp boundary, floating feel.
            </p>
          </Panel>
        ))}
      </div>
      <a href="#interactive" className="block no-underline">
        <Panel interactive>
          <p className="font-medium">Interactive</p>
          <p className="text-sm text-ink-secondary">
            The whole card is one link: it lifts on hover, shows a pointer, and
            rings on keyboard focus.
          </p>
        </Panel>
      </a>
    </div>
  );
}