Frame

The raw, unopinionated content container - the base every other card builds on. Default corner radius and squircle smoothing, a theme-aware border, and a quiet resting shadow out of the box. Nothing else - put whatever you want inside and style it yourself.

Installation

npx stepwise-ui add frame

Default

import { Frame } from '@/components/stepwise/frame'

// raw building block - reach for it when nothing else fits: settings rows,
// list items, one-off content blocks. For a pre-built shape, use Profile
// Card, Product Card, Pricing Card, or Stat Card instead.
<Frame className="p-5">
  Whatever you want goes here.
</Frame>

Props - Frame

PropTypeDescription

radius

number

Corner radius in px. Default 20.

borderWidth

number

Border stroke width in px. Default 1.

borderColor

string

Border color. Default the theme-aware --ui-border token.

borderOpacity

number

Border opacity, 0–1. Default 0.7.

className

string

Merged onto the surface.

FrameHeader, FrameTitle, FrameDescription, FrameContent, and FrameFooter are optional composition helpers - each accepts standard div/heading/paragraph props plus className.