Paper

Surface container that renders a <div> with the standard card background, rounded corners, and elevation shadow.

When to use

Use Paper as the base surface for cards, panels, and raised content blocks. It is a plain styled <div> with no built-in padding — add spacing with your own classes.

There is no @uxf/form twin — Paper is a layout/surface primitive.

Usage

import { Paper } from "@uxf/ui/paper";

<Paper className="p-6">Card content</Paper>;

Props

Extends HTMLAttributes<HTMLDivElement>, so all standard <div> attributes (className, onClick, id, children, …) are accepted. The ref is forwarded to the <div>.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/paper.css");