frame

Frame with stacked panels

Frame with stacked panels

Загрузка превью…

src/frame/c-frame-8.vue

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

<template>
  <Frame stacked class="w-full max-w-sm">
    <FrameHeader>
      <FrameTitle>Server Logs</FrameTitle>
      <FrameDescription>Recent activity and errors</FrameDescription>
    </FrameHeader>
    <FramePanel>
      <h2 class="text-sm font-semibold">Auth Service</h2>
      <p class="text-muted-foreground text-sm">
        Successfully logged in user: admin
      </p>
    </FramePanel>
    <FramePanel>
      <h2 class="text-sm font-semibold">Database</h2>
      <p class="text-muted-foreground text-sm">
        Query execution time: 12ms
      </p>
    </FramePanel>
    <FramePanel>
      <h2 class="text-sm font-semibold">Storage</h2>
      <p class="text-muted-foreground text-sm">
        Upload complete: image.png
      </p>
    </FramePanel>
  </Frame>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-frame-8.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)