VVibeFlui

Card, Tab, and Dashboard

VibeFlui exports small display primitives and a dashboard renderer:

  • FluiKitCard
  • FluiKitTab
  • FluiKitDashboard

FluiKitCard

FluiKitCard renders a small bordered card with optional icon, label, title, value, description, loading state, and children.

TSX
<FluiKitCard
  icon="mdi:account-group-outline"
  label="Users"
  value="1,240"
  description="Active users this month"
/>

loading replaces the value with ....

FluiKitTab

FluiKitTab can be controlled with value or uncontrolled with defaultValue.

TSX
<FluiKitTab
  defaultValue="schema"
  items={[
    { key: "schema", label: "Schema", content: <SchemaPanel /> },
    { key: "preview", label: "Preview", content: <PreviewPanel /> }
  ]}
/>

Disabled tab items cannot be selected.

FluiKitDashboard

FluiKitDashboard renders schema.dashboard from a normalized schema.

It returns null when:

  • dashboard config is absent
  • dashboard.enabled is false
  • no cards are configured and no custom renderer is registered

If dashboard.renderer exists in registry.renderers, that renderer receives schema, value, and className.

Otherwise, each dashboard card renders through FluiKitCard.

schemas/admin/admin.schema.ts

TS
export const adminSchema = {
  version: "1.0.0",
  resource: "admin",
  dashboard: {
    enabled: true,
    cards: [
      { key: "usersTotal", label: "Users", valueFrom: "meta.usersTotal", format: "number", icon: "mdi:account-group-outline" }
    ]
  }
} as const;

app/admin/dashboard-preview.tsx

TSX
"use client";

import { FluiKitDashboard, normalizeSchema } from "@vibeflui/core";
import { adminSchema } from "@/schemas/admin/admin.schema";

const schema = normalizeSchema(adminSchema);

export function DashboardPreview() {
  return <FluiKitDashboard schema={schema} data={{ meta: { usersTotal: 128 } }} />;
}

Dashboard cards

A card can read data from:

  1. card.endpoint, fetched as GET through executeEndpointRequest
  2. card.valueFrom against the dashboard data prop

Supported formats are:

  • number
  • currency
  • percent
  • text
  • custom

Currency formatting uses Intl.NumberFormat with USD.