Surface

The glass card that floats over the content under it: a dock, a banner, a toast, a find bar. It brings the translucent ground, the border and the floating shadow. You bring the shape (radius, padding, height) and the position.

tsx

import { Surface } from '@basmilius/react-ui';

tsx

import { Surface } from '@basmilius/react-ui';

export default function SurfaceDemo() {
    return (
        <div className="relative h-48 w-full max-w-md overflow-hidden rounded-lg bg-surface-sunken">
            <div className="absolute inset-0 grid grid-cols-6 gap-2 p-3">
                {Array.from({ length: 24 }, (_, index) => (
                    <span key={index} className="rounded-md bg-accent-soft" />
                ))}
            </div>
            <Surface className="absolute inset-x-6 bottom-4 rounded-xl px-4 py-3 text-sm text-text">A surface floats over what scrolls under it.</Surface>
        </div>
    );
}

Banner, DockShell and Toasts are drawn on it. For a card that sits in the layout rather than over it, use bg-surface and a border.

Surface takes the props of a <div>, className, ref and render. SurfaceProps is an exported type.

Surface ​

Surface