Card

Surface container with optional header, body, and footer slots. Pure HTML — no base-ui dependency.

Basic

API GatewayProduction endpoint config

Route traffic through the API gateway to apply rate limiting, auth, and logging.

Activeus-east-1

Edge WorkerCloudflare Workers runtime

Deploy serverless functions at the edge with sub-millisecond cold starts.

Deploying

import { Badge } from "@brijbyte/agentic-ui/badge";
import { Button } from "@brijbyte/agentic-ui/button";
import { Card, CardHeader, CardBody, CardFooter } from "@brijbyte/agentic-ui/card";

import "@brijbyte/agentic-ui/badge.css";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/card.css";

export default function BasicDemo() {
  return (
    <>
      <Card style={{ width: 280 }}>
        <CardHeader heading="API Gateway" description="Production endpoint config" />
        <CardBody>
          <p
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              lineHeight: "var(--line-height-relaxed)",
              color: "var(--color-secondary)",
            }}
          >
            Route traffic through the API gateway to apply rate limiting, auth, and logging.
          </p>
        </CardBody>
        <CardFooter>
          <Badge variant="success" dot>
            Active
          </Badge>
          <span
            style={{
              marginLeft: "auto",
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-xs)",
              color: "var(--color-tertiary)",
            }}
          >
            us-east-1
          </span>
        </CardFooter>
      </Card>

      <Card elevated style={{ width: 280 }}>
        <CardHeader heading="Edge Worker" description="Cloudflare Workers runtime" />
        <CardBody>
          <p
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              lineHeight: "var(--line-height-relaxed)",
              color: "var(--color-secondary)",
            }}
          >
            Deploy serverless functions at the edge with sub-millisecond cold starts.
          </p>
        </CardBody>
        <CardFooter>
          <Badge variant="warning" dot>
            Deploying
          </Badge>
          <Button size="xs" variant="ghost" style={{ marginLeft: "auto" }}>
            View logs
          </Button>
        </CardFooter>
      </Card>
    </>
  );
}

Interactive

Click me →Hover + press states built in

import { Card, CardBody } from "@brijbyte/agentic-ui/card";
import "@brijbyte/agentic-ui/card.css";

export default function InteractiveDemo() {
  return (
    <Card interactive elevated style={{ width: 240 }}>
      <CardBody>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1)" }}>
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              fontWeight: "var(--font-weight-semibold)",
              color: "var(--color-primary)",
            }}
          >
            Click me →
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-xs)", color: "var(--color-tertiary)" }}>
            Hover + press states built in
          </span>
        </div>
      </CardBody>
    </Card>
  );
}

API Reference

Card

Surface container with optional header, body, and footer slots.
Pure HTML — no base-ui dependency.

Prop	Type	Default
elevated	`boolean`	—
Apply a raised shadow for layered surfaces.
interactive	`boolean`	—
Add hover/active states for clickable cards.

CardHeader

Header area with optional heading and description.

Prop	Type	Default
heading	`ReactNode`	—
Card heading rendered in the header area.
description	`ReactNode`	—
Secondary text below the heading.

CardBody

Padded body content area.

No custom props — accepts all standard HTML attributes.

CardFooter

Footer area, typically used for actions.

No custom props — accepts all standard HTML attributes.

CSS Class Names

Available as keys on the CardStyles object. Each key maps to a hashed CSS module class name at runtime.

bodydescriptionfooterheaderrootroot-elevatedroot-interactivetitle