Frame

Constrained content frame with consistent padding.

stable

Preview

Constrained frame with max-width and padding

Code

tsx

import { Frame } from "@/components/ui/frame";

export function Example() {
  return (
    <Frame maxWidth="sm" padding="md">
      <p>Content constrained to sm max-width with md padding.</p>
    </Frame>
  );
}

Props

Prop	Type	Default	Description
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Constrained content frame with consistent horizontal padding and a centered max-width. Use as a page-level container.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/frame.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { type HTMLAttributes, forwardRef } from "react";

const frameVariants = cva("w-full", {
  variants: {
    padding: {
      none: "",
      sm: "px-4 py-4",
      md: "px-6 py-6",
      lg: "px-8 py-8",
      xl: "px-12 py-12",
    },
    maxWidth: {
      sm: "max-w-sm mx-auto",
      md: "max-w-2xl mx-auto",
      lg: "max-w-4xl mx-auto",
      xl: "max-w-6xl mx-auto",
      "2xl": "max-w-7xl mx-auto",
      full: "",
    },
  },
  defaultVariants: { padding: "md", maxWidth: "xl" },
});

export interface FrameProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof frameVariants> {}

export const Frame = forwardRef<HTMLDivElement, FrameProps>(
  ({ className, padding, maxWidth, ...props }, ref) => (
    <div ref={ref} className={cn(frameVariants({ padding, maxWidth }), className)} {...props} />
  ),
);
Frame.displayName = "Frame";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmFrame (extends VBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmFrame;

PrizmFrame()

Prop	Type	Default	Description
setFramePadding	`(Padding) → void`	—	NONE/SM/MD/LG/XL = 0/16/24/32/48px. Default MD.
setFrameMaxWidth	`(MaxWidth) → void`	—	SM/MD/LG/XL/XXL/FULL = 384/672/896/1152/1280/∞. Default XL.

Max-width padded container. The web centres with mx-auto; in JavaFX place it in a centring parent. Mirrors components/ui/frame.tsx.