Components

Card

A bordered container with header, content, and footer slots.

Production

Deployed 2 minutes ago

Three services healthy. No incidents in the last 24 hours.

Usage

With @flagon-io/ui installed (see Installation), import it directly.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@flagon-io/ui";
import { Button } from "@flagon-io/ui";

<Card>
  <CardHeader>
    <CardTitle>Production</CardTitle>
    <CardDescription>Deployed 2 minutes ago</CardDescription>
  </CardHeader>
  <CardContent>Everything is healthy.</CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">View</Button>
  </CardFooter>
</Card>

Prefer to own the code?

You don’t have to install the package - you can copy this component into your project with the shadcn CLI and edit it freely.

npx shadcn@latest add https://ui.flagon.io/r/card.json