Components
Loading preview...
A framed container for grouping related information with header, panels, and footer sections.
npx shadcn@latest add https://21st.dev/r/coss.com/frameimport {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/component";
export default function Particle() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Frame className="w-full max-w-lg">
<FrameHeader>
<FrameTitle>Section header</FrameTitle>
<FrameDescription>
Brief description about the section
</FrameDescription>
</FrameHeader>
<FramePanel>
<h2 className="font-semibold text-sm">Section title</h2>
<p className="text-muted-foreground text-sm">Section description</p>
</FramePanel>
<FrameFooter>
<p className="text-muted-foreground text-sm">Footer</p>
</FrameFooter>
</Frame>
</div>
);
}