Status

Status components are used to display the uptime of a service.

Installation

npx love-ui@latest add status

Usage

import { Status, StatusIndicator, StatusLabel } from "@/components/status"

<Status status="online">
  <StatusIndicator />
  <StatusLabel>All systems operational</StatusLabel>
</Status>

Features

Displays the status of a service
Automatic colors based on the status
Customizable colors and labels
Ping animation for the indicator

Examples

Custom styles

Fully operational

"use client";

import { Status, StatusIndicator, StatusLabel } from "../../../../../packages/status";

const Example = () => (
  <Status
    className="gap-4 rounded-full px-6 py-2 text-sm"
    status="online"
    variant="outline"
  >
    <StatusIndicator />
    <StatusLabel className="font-mono">Fully operational</StatusLabel>
  </Status>
);

export default Example;

Table Relative Time