This component no longer exists. It was in ondo-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-09 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
frame
ondo-ui/frameRemovedComponent
A bordered surface that nests panels inside it with concentric radii and a shared spacing scale.
Install it
npx shadcn@latest add https://ui.ondo.dou.so/r/frame.jsonSource
1import { cva, type VariantProps } from "class-variance-authority"23import { cn } from "@/lib/utils"45const frameVariants = cva(6 [7 "relative flex flex-col gap-(--frame-gap) rounded-(--frame-radius) bg-muted/50 px-(--frame-px) py-(--frame-py)",8 "[--frame-radius:var(--radius-xl)] [--frame-radius-inset:--spacing(0.75)]",9 "[--frame-panel-footer-gap:--spacing(1)] [--frame-panel-header-gap:0rem]",10 "[--frame-panel-footer-px-adjust:0px] [--frame-panel-footer-py-adjust:0px] [--frame-panel-header-px-adjust:0px] [--frame-panel-header-py-adjust:0px] [--frame-panel-px-adjust:0px] [--frame-panel-py-adjust:0px]",11 "[--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)_+_var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)_+_var(--frame-panel-footer-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)_+_var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)_+_var(--frame-panel-header-py-adjust))] [--frame-panel-px:calc(var(--frame-panel-px-base)_+_var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)_+_var(--frame-panel-py-adjust))]",12 "[--frame-border-color:var(--color-border)] [--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)]",13 "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-radius-inset)_-_1px)]",14 ],15 {16 variants: {17 variant: {18 default: "border border-[var(--frame-border-color)] bg-clip-padding",19 inverse:20 "border border-[var(--frame-border-color)] bg-background bg-clip-padding [--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)]",21 ghost:22 "[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-radius-inset))]",23 },24 spacing: {25 xs: "[--frame-gap:--spacing(0.5)] [--frame-px:--spacing(0.5)] [--frame-py:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(1.5)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(1.5)]",26// … truncated
What it pulls in
npm packages
Other registry items
