Status

Component 27

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 = () => (
  <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;