Frame with small border radius

<script setup lang="ts">
import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
</script>

<template>
  <Frame class="w-full max-w-sm [--frame-radius:var(--radius-sm)]">
    <FrameHeader>
      <FrameTitle>Network Diagnostics</FrameTitle>
      <FrameDescription>
        Analyzing real-time socket connections
      </FrameDescription>
    </FrameHeader>
    <FramePanel>
      <h2 class="text-sm font-semibold">Port Status</h2>
      <p class="text-muted-foreground text-sm">
        Small radius gives a sharp, precise look, perfect for technical
        dashboards and data grids.
      </p>
    </FramePanel>
    <FrameFooter>
      <p class="text-muted-foreground text-sm">Scan completed</p>
    </FrameFooter>
  </Frame>
</template>