Status

Component 76

About

Here is Status component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Status to your project and fits it to your theme.

Code

How Status is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { Status, StatusIndicator, StatusLabel } from '@/components/ui/status';

const Example = () => (
  <div className="flex gap-2">
    <Status status="online">
      <StatusIndicator />
      <StatusLabel />
    </Status>

    <Status status="offline">
      <StatusIndicator />
      <StatusLabel />
    </Status>

    <Status status="maintenance">
      <StatusIndicator />
      <StatusLabel />
    </Status>

    <Status status="degraded">
      <StatusIndicator />
      <StatusLabel />
    </Status>
  </div>
);

export default Example;